Kirby + Tailwind @apply function doesn't work

[SemMakata]

I’m using Tailwind, but the @apply function doesn’t work for me, I’m new to Kirby, so it could be an obvious answer, but I can’t figure it out alone, so help is appreciated.

This is my file structure how I layerd my CSS:

This is my main.css:

@charset "utf-8";

/* -------------------------------- 
Main.css
-------------------------------- */

@layer components {
  /* utilities */
  @import url("utilities/_variables.css");

  /* abstracts */

  /* base */

  /* components */
  @import url("components/_grid.css");
  @import url("components/_typography.css");

  /* layouts */
  @import url("layouts/_header.css");
  @import url("layouts/_navigation.css");

  /* pages */
}

This is my _typography.css where the apply function is being used:

/* -------------------------------- 
Typography
-------------------------------- */

@import url("https://use.typekit.net/wdj2krj.css");

:root {
  --sans-serif: new-frank, sans-serif;
  --serif: Tabril-display, serif;
  --serif-display: abril-display, serif;

  --extra-light: 100;
  --light: 300;
  --normal: 500;
  --semi-bold: 600;
  --bold: 700;
  --black: 800;
  --extra-black: 900;
}

body {
  font-family: var(--sans-serif);
}
.heading {
  @apply sm:leading-tight md:leading-tight lg:leading-tight leading-tight z-10  text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-thin text-black;
}

.heading-1 p strong {
  font-family: var(--serif-display);
  font-weight: var(--normal);
  color: var(--primary);
}

[texnixe]

This is not a Kirby related question, I’m afraid, but Tailwind-specific.

But make sure your build-process is watching or you build manually, so your changes make it into the generated CSS file.

We have a recipe for Tailwind CSS: Kirby meets Tailwind CSS | Kirby CMS

[SemMakata]

@texnixe it was indeed a tailwind issue,
The Tailwind problem was fixed by installing postcss and reorganizing the file structure. I will post my changes here, in case someone has the same issue. First I installed PostCSS by running “npm i postcss” in the project terminal, after that I installed the PostCSS-Import plugin by running the “npm install -D postcss-import” command. I followed this up by adding a file called: “postcss.config.js” In this file I added this code:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

In my Tailwind.css file located at src/css/tailwind.css, I changed the code to a simple import function to import my main.css located in the assets folder.

@import url("https://use.typekit.net/wdj2krj.css");
@import "../../assets/css/main.css";

All my content will be located in the main.css and be placed in the style.css created by Tailwind.

I removed the following tailwind functions:

@tailwind base
@tailwind components
@tailwind utilities

To use Tailwind properly I need to import these functions again, but because I use the CSS import function in my main.css, that result in that I can’t the functions in the original way because the import function should always be at the top of your CSS file. So I added a folder new folder in my “assets/css” folders and called that folder “vendors” In this folder I created a second folder called “_tailwindcss” This is the folder where I created the new files called “__base.css, __components.css and __utilities.css” Then i added the following CSS:
__base.css:

@tailwind base;

__components.css:

@tailwind components;

__utilities.css:

@tailwind utilites;

After that, I wanted to Import these functions into my main.css I did this by adding the following code:

/* vendors */
@import "vendors/_tailwindcss/__base.css";
@import "vendors/_tailwindcss/__components.css";
@import "vendors/_tailwindcss/__utilities.css";

So the following CSS is how my main.css file is structured:

@charset "utf-8";

/* -------------------------------- 
main
-------------------------------- */

/* vendors */
@import "vendors/_tailwindcss/__base.css";
@import "vendors/_tailwindcss/__components.css";
@import "vendors/_tailwindcss/__utilities.css";

/* utilities */
@import "utilities/_variables.css";

/* abstracts */

/* base */

/* components */
@import "components/_grid.css";
@import "components/_typography.css";

/* layouts */
@import "layouts/_header.css";
@import "layouts/_navigation.css";

/* pages */

I’m using the 7-1 tactic to structure my CSS without using SASS. Also is here a screenshot of my file structuring:

Here some links to useful documentation:

Using with Preprocessors - Tailwind CSS

postcss

And of course the installation guide of Kirby:

Kirby meets Tailwind CSS

[dimejo]

@SemMakata

I’m using the 7-1 tactic to structure my CSS without using SASS. Also is here a screenshot of my file structuring:

What’s the benefit of using this approach with Tailwind? To me this looks more complicated than it needs to be unless you have lots of @apply directives.

[SemMakata]

The only benefit is that its more structured and readable.