Setting up Tailwind CSS in a Svelte project.
-
Install necessary dependencies:
npm i -D svelte-preprocess tailwindcss postcss autoprefixer
-
Run the init command to generate the
tailwind.config.js
file:npx tailwindcss init
-
Configure svelte-preprocess in your
rollup.config.js
file:// ... import sveltePreprocess from 'svelte-preprocess' // ... export default { // ... plugins: [ svelte({ // ... preprocess: sveltePreprocess({ sourceMap: !production, postcss: { plugins: [require('tailwindcss')(), require('autoprefixer')()], }, }), }), // ... ], // ... }
-
Add the Tailwind directives to your
App.svelte
:<script> export let name; </script> <main> <h1>Hello {name}!</h1> <p> Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> <style lang="postcss" global> @tailwind base; @tailwind components; @tailwind utilities; </style>
-
Finally, add the paths to all of your template files in your
tailwind.config.js
file:module.exports = { content: ['./public/index.html', './src/**/*.svelte'], theme: { extend: {}, }, plugins: [], }
Install the dependencies...
npm install
...then start Rollup:
npm run dev
npm run build
This template comes with a script to set up a TypeScript development environment, run:
node scripts/setupTypeScript.js