How do I use tailwindcss @apply directive inside a svelte component <style>

Question

This works:

<div class="list p-2" />

This doesn't work:

<style lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  @layer components {
    .list {
      @apply p-2;
    }
  }
</style>

I looked in Svelte's docs, but it explains the process with SvelteKit, which I'm not using. How can I make it work?

webpack.config.js:

...
module: {
rules: [
  {
    test: /\.css$/i,
    use: ['style-loader', 'css-loader', 'postcss-loader'],
  },

tailwind.config.js:

module.exports = {
  purge: [
    './*.html',
    './src/**/*.js',
    './src/**/*.svelte'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js:

module.exports = {
  plugins: [
    ['tailwindcss'],
    ['autoprefixer'],
  ],
};

brunnerh · Accepted Answer · 2022-05-31 11:48:21Z

3

You need to install svelte-preprocess and use it in the svelte-loader for Webpack.

The documentation for using @import gives an example:

const sveltePreprocess = require('svelte-preprocess');
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(html|svelte)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess: sveltePreprocess({
              postcss: true
            })
          }
        }
      }
      ...
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
  ]
}

(You may need various peer dependencies like postcss itself and postcss-load-config depending on which kinds of features you use.)

answered May 31, 2022 at 11:48

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nikolay Dyankov Over a year ago

Thank you, it's working now but it won't purge unused css. I'm getting 74 warnings of unused CSS selectors as soon as I add the three @tailwind directives in my <style> tag. I tried manually setting process.env.NODE_ENV to "production" and my tailwind.config.js is bare bones.

brunnerh Over a year ago

You might want to place the @tailwind directives in a global style tag on a root component (example). That should get rid of the warnings, but I do not know if the purging will automatically work.

Nikolay Dyankov Over a year ago

I tried that before, but for some reason the @tailwind directives are not being treated as global. If I try to use @apply in another component I get an error "no matching @tailwind components directive". A regular CSS selector works, it affects other components. The styles are in <style global lang="postcss">

Nikolay Dyankov Over a year ago

Testing things further, if I only include the @tailwind directives in my main component, the tailwind classes that you apply inline to elements work fine, only when I try to use @layer components I get the error. And when I add the directives to that component as well, it complains about css duplication.

rozsazoltan · Accepted Answer · 2025-03-30 20:22:57Z

1

Although the answer might be correct in declaring TailwindCSS in every component by @import "tailwindcss"; (not recommended), I believe it's better to declare TailwindCSS globally just once.

With multiple @import "tailwindcss"; statements, you're initializing TailwindCSS many times, which is not very efficient. Instead, initialize it once and reuse it through the @reference directive.

./src/css/global.css

@import "tailwindcss";

@theme {
  
}

Using @apply with Vue, Svelte, or CSS modules - TailwindCSS v4 Docs

After that, TailwindCSS v4's CSS-first configuration provides a @reference directive, which allows us to integrate TailwindCSS functionality into the scoped styles of each extra Vue, Svelte, and other components.

If you want to use @apply or @variant in the <style> block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.

To do this without duplicating any CSS in your output, use the @reference directive to import your main stylesheet for reference without actually including the styles:

./src/components/component.svelte

<style lang="postcss">
@reference "./../css/global.css";
    
.list {
  @apply p-2;
}
</style>

If you're just using the default theme with no customizations, you can import tailwindcss directly without global.css' customizations:

./src/components/component.svelte

<style lang="postcss">
@reference "tailwindcss";
    
.list {
  @apply p-2;
}
</style>

@reference directive - TailwindCSS v4 Docs

answered Mar 30 at 20:22

rozsazoltan

18.2k8 gold badges49 silver badges146 bronze badges

2 Comments

rozsazoltan Sep 17 at 13:04

Related: Stop using @apply - Moni

Nk54 Nov 9 at 22:43

imho, it should be the accepted answer : use reference over import tailwindcss if tailwind is already imported in a global.css

Hatem Jaber · Accepted Answer · 2025-03-26 23:32:22Z

0

In case someone needs this...

<style lang="postcss">
    .list {
      @apply p-2;
    }
</style>

EDIT: 03/26/2025

For Tailwind 4 you have to do this:

<style lang="postcss">
    @import "tailwindcss";
    
    .list {
      @apply p-2;
    }
</style>

edited Mar 26 at 23:32

answered Feb 20 at 15:09

Hatem Jaber

2,4372 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

How do I use tailwindcss @apply directive inside a svelte component <style>

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related