💨 Add Tailwind CSS to Svelte

❓ What is this?

This is an experimental command to run to add Tailwind CSS to your SvelteKit project or Vite-powered Svelte app.

🧰 Adding to SvelteKit

You must start with a fresh copy of the official SvelteKit template, which is currently created by running this command:

npm init svelte@next

Once that is set up, run this command in your project directory to set up Tailwind CSS:

npx svelte-add tailwindcss  # --jit

⚡️ Adding to Vite

You must start with a fresh copy of the official Vite-powered Svelte app template, which is currently created by running this command:

npm init @vitejs/app  # Choose svelte or svelte-ts

Once that is set up, run this command in your project directory to set up Tailwind CSS:

npx svelte-add tailwindcss  # --jit

🛠 Usage

After the preset runs,

• You can use Tailwind utility classes like bg-blue-700 in the markup (components, routes, app.html).

• You can use Tailwind directives like @apply and @screen or use the theme function in Svelte style blocks or the src/global.css file.

• Your Tailwind CSS will be purged for production builds.

• You can apply another Svelte Adder to your project for more functionality.

😵 Help! I have a question

Create an issue and I'll try to help.

😡 Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

These are new tools, so there are likely to be problems in this project. Thank you for bringing them to my attention or fixing them for me.

📄 License

MIT

Repository preview image generated with GitHub Social Preview

This README was generated with ❤️ by readme-md-generator