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 [email protected]
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>
