Hello everyone Today we will install & set up tailwind css 3 in svelte using Vite, TypeScript. vite is power tool you can easily install & setup javascript framework like vue, react, svelte etc. For today we will use vite tool to create svelte app with tailwind css 3.
Create Svelte App with vite
npm create vite@latest
Choose svelte project.
✔ Project name: … svelte-tailwind
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
react
preact
lit
❯ svelte
Next, you need to select TypeScript
✔ Project name: … svelte-tailwind
✔ Select a framework: › svelte
? Select a variant: › - Use arrow-keys. Return to submit.
svelte
❯ svelte-ts
then, move to project and run command
cd svelte-tailwind
npm install
npm run dev
Install Tailwind CSS 3 in Svelte
Run below command to install & setup tailwind
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init tailwind.config.cjs -p mv postcss.config.js postcss.config.cjs
Next, you need config in tailwind.config.cjs.
tailwind.config.cjs
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {},
},
plugins: [],
}
Create app.css file in src folder
src/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
import app.css in main.ts or svelte components
main.ts
import App from './App.svelte'
import "./app.css";
const app = new App({
target: document.getElementById('app')
})
export default app
or App.svelte
<script lang="ts">
import "./app.css";
</script>
<main>
<div class="flex h-screen justify-center items-center flex-col">
<h1 class="text-3xl font-bold text-orange-600">
Svelte with tailwind CSS 3
</h1>
<button class="px-8 py-3 rounded bg-orange-500 text-white">Button</button>
</div>
</main>
sveltekit tailwind
run the server
npm run dev
How to Install Tailwind CSS 3 in Svelte Via CDN
You can use <svelte:head> special element to import tailwind css cdn. The <svelte:head> element allows you to insert elements inside the <head> of your document:
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
Svelte With Tailwind CSS CDN Example.
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
<script>
</script>
<div class="flex h-screen justify-center items-center flex-col">
<h1 class="text-3xl font-bold text-orange-600">
Svelte with tailwind CSS 3
</h1>
<button class="px-8 py-3 rounded bg-orange-500 text-white">Button</button>
</div>
