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.