Install Tailwindcss in Svelte with 1 command

Install Tailwindcss in Svelte with 1 command

Stop using the 5 step method and remember the npx command to install tailwind.


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: [
            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,
        //But others, like autoprefixer, need to run after,

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

    import '../app.postcss';

<slot />