Add tailwindcss to Svelte
255
In this post, let's see how to integrate svelte with tailwindcss.
Installing dependencies
Run the below command
npm i --save-dev tailwindcss postcss-cli npm-run-all
Run the below command to create a tailwind config file
npx tailwind init
Open the tailwind.config.js
file and add the below code
module.exports = {
purge: ["./src/**/*.svelte"],
theme: {
extend: {},
},
variants: {},
plugins: [],
};
Create a postcss.config.js
file in the root directory and add the below code
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [tailwindcss("./tailwind.config.js")],
};
Create tailwind.css
in public
folder
@tailwind base;
@tailwind components;
@tailwind utilities;
Open your index.html
file and add below line in head
<link rel="stylesheet" href="index.css" />
Now goto package.json
and change the scripts with the below
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"dev": "run-p start:dev autobuild watch:tailwind",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public --single",
"start:dev": "sirv public --single --dev",
"autobuild": "rollup -c -w"
},