Tailwind utility classes in <style>

[dev-guy]

DO NOT do this!

Using @apply in Svelte files considered harmful.

In a .svelte file, I want to use Tailwind utility classes

For example:

<style>
  .toolbar button {
    @apply bg-blue-700
  }
</style>

What I did

I found a hint.

build.js:

const tailwind = require('tailwindcss');
const autoprefixer = require('autoprefixer');
...
plugins: ...
        sveltePlugin({
            preprocess: sveltePreprocess({
                postcss: {
                    plugins: [
                        tailwind, 
                        autoprefixer
                    ]
                }
            }),
            compilerOptions: {hydratable: true, css: true},
        }),

This requires:

npm --save-dev tailwindcss @tailwind/forms autoprefixer

Caveat

The above works. However, classes that contain semicolons such as focus:outline-none generate errors.

Solution: add lang="scss" attribute to <style>:

<style lang="scss">
  .toolbar button {
    @apply bg-blue-700 focus:outline-none
  }
</style>

This requires:

npm --save-dev postcss sass

[woutdp]

Thanks! I think it's too specific to include as a default inside LiveSvelte, it's more of a personal configuration thing instead of a core feature as not everyone wants to define tailwind utility classes inside Svelte. And if people want it they can configure it themselves with the guide you provided :)

[dev-guy]

Actually, using @apply in Svelte files is a bad idea