Install Tailwindcss in Svelte with 1 command
Ads
Here is how to install Tailwindcss in Svelte
npx svelte-add tailwindcss
Yep thats it you don’t need anything else :D
Okay so what does this actually do?
Update ./package.json
Includes the required development packages.
"devDependencies": {
...
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"svelte-preprocess": "^4.10.7",
"autoprefixer": "^10.4.7",
"tailwindcss": "^3.1.5"
}
Add ./tailwind.config.json
Adds the correct configuration for Tailwind, which adds all of the necessary content file types.
const config = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
};
module.exports = config;
Update ./svelte.config.js
Updates to add the preprocess requirement.
import preprocess from 'svelte-preprocess';
...
preprocess: [
preprocess({
postcss: true
})
]
...
Add ./postcss.config.cjs
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer
]
};
module.exports = config;
Add ./src/app.postcss
Includes the global files
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;
Add ./src/routes/+layout.svelte
<script>
import '../app.postcss';
</script>
<slot />
