Yet another Svelte and Tailwind CSS installation post.
I have been looking through several guides on how to install Tailwind CSS in Svelte and this is my final way of doing it. I am in no way an expert in this and there are definitely many correct ways of doing it.
Heavily influenced by these posts:
https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5
https://dev.to/paul42/svelte-tailwind-css-minimal-install-ia2
Required: A Svelte installation
Step 1 - Install dependencies
There is a package called svelte-preprocess that will handle all CSS processing so there is no need to change the npm scripts.
npm install -D svelte-preprocess postcss tailwindcss autoprefixer
Step 2 - Setup configuration files
tailwind.config.js
// tailwind.config.js
const production = !process.env.ROLLUP_WATCH; // Or some other env var like NODE_ENV
module.exports = {
future: { // For Tailwind 2.0 upcoming changes
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
plugins: [],
purge: {
content: [
"./src/**/*.svelte",
"./public/**/*.html"
],
enabled: production // Disable purge in dev
},
};
In your rollup.config.js add the import and the other lines in the bottom of the svelte section.
import sveltePreprocess from "svelte-preprocess";
svelte({
// etc...
preprocess: sveltePreprocess({
sourceMap: !production,
postcss: {
plugins: [
require("tailwindcss"),
require("autoprefixer")
],
},
}),
}),
Step 3 - Add the Tailwind styles to the app
Now in your App.svelte or Layout.svelte add this:
<style global lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
Acknowledgement
This was heavily influenced by these posts:
https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5
https://dev.to/paul42/svelte-tailwind-css-minimal-install-ia2
Top comments (0)