Setting up Tailwind with Svelte is really simple, just install necessary dependencies:
npm i -D svelte-preprocess tailwindcss postcss postcss-load-config autoprefixerCreate your configuration files
npx tailwindcss init -pConfigure svelte-preprocess in rollup.config.js
// ...
import sveltePreprocess from 'svelte-preprocess';
// ...
export default {
// ...
plugins: [
svelte({
preprocess: sveltePreprocess({ postcss: true }),
// ...
}),
// ...
],
// ...
};Next, import Tailwind styles into a component and add it to App.svelte
*Tailwind styles must be imported into a separate component so that changes can be immediately reflected in the browser.
<!-- ./src/Components/Tailwind.svelte -->
<style global>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style><!-- App.svelte -->
<script>
import Tailwind from './components/Tailwind.svelte';
export let name;
</script>
<Tailwind />
<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>Finally, configure purge in tailwind.config.js:
module.exports = {
purge: {
enabled: !process.env.ROLLUP_WATCH,
mode: 'all',
content: ['./public/index.html', './src/**/*.svelte'],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};Install the dependencies...
cd Svelte-Tailwind
npm install...then start Rollup:
npm run devnpm run build