Configure TailwindCSS in Svelte Kit

 TailwindCSS can be configured in Svelte Kit. Install the dependencies first 🤜.

 

npm install -D tailwindcss postcss autoprefixer svelte-preprocess

npx tailwindcss init tailwind.config.cjs -p 

 Configure the the Tailwind config content key with the following 

//tailwind.config.cjs

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

Create app.css file and import Tailwind classes and utilities.

//app.css

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

Import the app.css in +layout.svelte file.

<script> import "../app.css"; </script> <slot /> 

Lets test some style

<h1 class="text-3xl font-bold underline"> Hello world! </h1>

Now it should working. 🤔

 Read more TailwindCSS guides