Sharing component classes across files

[mrtnbroder]

Hi there!

first, let me say that tailwindcss is just awesome. Loving it so far!

I was looking into extracting common components into their own classes, just like mentioned here. My main styles file for that looks like this:

styles.css:

@tailwind base;

@tailwind components;

@import "../system/Text/index.css";
@import "../system/Link/index.css";

@tailwind utilities;

@layer utilities {
  .filter-grayscale {
    filter: grayscale(1)
  }
}

Text/index.css:

@layer components {
  .Text {
    @apply text-base block text-gray-800;
  }
}

Now here comes my "issue" or idea. Unfortunatly it's not possible atm how it looks like (without writing it as a plugin).

My Link component shares the same base styles with .Text, so I tried the following:

Link/index.css:

@layer components {
  .Link {
    @apply Text;
  }
}

But that throws an error:

The `Text` class does not exist. If you're sure that `Text` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

As you can see in my main styles.css, Text is clearly imported before Link, so it should be possible to use @apply. Maybe I'm missing something but it doesn't look supported atm. Would be cool if it did though.

Thanks!

[simonswiss]

Hey 👋

In styles.css, can you try replace the @tailwind directives with:

@import "tailwindcss/base";
@import "tailwindcss/components";

?

If you could setup a little minimal reproduction of this issue to look at, that would be super helpful 👍

[mrtnbroder]

Hi @simonswiss, sorry for the late reply, a puppy just moved in with us 🐶

I tried your solution, replacing @layer base etc. with @import "tailwindcss/base", but that didnt work until I added postcss-import into my postcss.config.js. That did the trick.

I'm curious though, what is the difference between using @layer base vs. @import "tailwindcss/base"?