Tailwind CSS with Svelte

In this tutorial video, we cover how to incorporate Tailwind CSS into your Svelte project

📚 Library(s) needed:
Creating the Svelte project:
npx degit sveltejs/template your-awesome-project
Adding the dependencies:
npm install autoprefixer postcss-cli tailwindcss concurrently cross-env --save-dev

💡 Have a video request?
Suggest it in the Dev Ascend Discord community server or leave it in the comments below!

🕐 Timestamps:
00:00 Introduction
00:21 Creating Svelte project
00:46 Installing dev dependencies
01:00 Creating postcss and tailwind files
01:47 Setting up scripts

#tailwind #svelte #devascend

[AnatolyKosorukov]

Two settings which help me to run this project configurations correctly:

1. Install rollup globally (npm install --global rollup).
2. Replace "watch:tailwind" command content to "npx tailwindcss -i public/tailwind.css -o public/index.css"

[NickReisenauer]

Love using Tailwind, thanks for the integration

[miba]

Thanks for the tutorial. I additionally had to use "npm install postcss --save-dev" to make it work. But if we build the project all the css styles from Tailwind CSS are in the "index.css" file. Is there a way to purge the unused styles?

[thespicehoarder]

Hey, I think you've been hacked, all these links are bad!

[dars]

Do you mind sharing that cool wallpaper

[arjunthakur]

index.css file is not getting generated in my editor

[eotikurac]

i don't have any questions, i just want to die

[wilydeee]

Script:

"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public",
"serve": "serve public -p 80",
"dev": "concurrently \"rollup -c -w \" \"npm run watch:tailwind\""
},