Install Tailwindcss in Svelte with 1 command

Here is how to install Tailwindcss in Svelte

npx svelte-add tailwindcss

Yep thats it you don’t need anything else :D

Okay so what does this actually do?

Update ./package.json

Includes the required development packages.

"devDependencies": {
...
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"svelte-preprocess": "^4.10.7",
"autoprefixer": "^10.4.7",
"tailwindcss": "^3.1.5"
}

Add ./tailwind.config.json

Adds the correct configuration for Tailwind, which adds all of the necessary content file types.

const config = {
    content: ['./src/**/*.{html,js,svelte,ts}'],

    theme: {
        extend: {}
    },

    plugins: []
};

module.exports = config;

Update ./svelte.config.js

Updates to add the preprocess requirement.

import preprocess from 'svelte-preprocess';

...
preprocess: [
        preprocess({
            postcss: true
        })
    ]
...

Add ./postcss.config.cjs

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const config = {
    plugins: [
        //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
        tailwindcss(),
        //But others, like autoprefixer, need to run after,
        autoprefixer
    ]
};

module.exports = config;

Add ./src/app.postcss

Includes the global files

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

Add ./src/routes/+layout.svelte

<script>
    import '../app.postcss';
</script>

<slot />

Blog