HomeAboutProjectsContactBlog

How to use Tailwind CSS with Svelte

Create your project

Generate a sveltejs template:

npx degit sveltejs/template svelte-tailwind cd svelte-tailwind

Install Tailwind CSS and all the other dependencies:

npm install -D tailwindcss postcss autoprefixer

Configure Tailwind config file

Generate both tailwind.config.js and postcss.config.js:

npx tailwindcss init -p

Modify tailwind.config.js:

module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: {}, }, plugins: [], }

Add the Tailwind directives in App.svelte:

<style global> @tailwind base; @tailwind components; @tailwind utilities; </style>

Setup Rollup config

Install svelte-preprocess:

npm i svelte-preprocess

Add it in your rollup.config.js:

import sveltePreprocess from "svelte-preprocess" ... export default { ... plugins: [ ... svelte({ ... preprocess: sveltePreprocess({ postcss: true, }), ...

And voilĂ ! Now you can use Tailwind CSS in your svelte project.