add tailwind to svelte kit app.md

Adding tailwind css to a svelte app that is based off of svelte kit

Step 1: Set up the project

mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer

Step 2: postcss

Create a postcss.config.cjs file. Svelte 3 is bundled by Vite which comes with postcss support out of the box.

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}

Step 3: tailwind config

Create a tailwind.config.cjs file to enable the just-in-time compiler and add the correct paths to be purged. You can also run npx tailwind init

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.svelte'],
}

Step 4: create and import the css file

Add these tags somewhere in your css so that postcss knows where to insert the tailwind styles. A good place to import these is the $layout.svelte file.

@tailwind base;
@tailwind components;
@tailwind utilities;