In this section we will install & setup tailwind v3 in Svelte kit. SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.
Create Svelte KIT project
run below command to install sveltekit project.
npm init svelte@next tail-svelte
Now, select your project requirements.
install & setup tailwind in svelte
Next steps:
1: cd tail-svelte
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
Install Tailwind CSS 3
Install tailwindcss and its peer dependencies via npm, and then run the following commands to generate both tailwind.config.cjs and postcss.config.cjs.
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init tailwind.config.cjs -p mv postcss.config.js postcss.config.cjs
Configure your template paths
tailwind.config.cjs
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
};
Add the Tailwind directives to your CSS
Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Import the CSS file
Create a ./src/routes/__layout.svelte file and import the newly-created app.css file.
__layout.svelte
<script>
import "../app.css";
</script>
<slot />
Start using Tailwind in your project
index.svelte
<div class="container mx-auto">
<h1 class="text-2xl font-bold ">
Install Tailwind CSS 3
<span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-orange-500 to-purple-600">
In SvelteKit
</span>
</h1>
</div>
tailwind svelte index file
Start your build process
npm run dev
#or
npm run dev -- --open
You can also read tailwind css doc.
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Cards Examples
