How to Install Tailwind CSS 3 in Svelte

How to Install Tailwind CSS 3 in Svelte

05/22 By frontendshape

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

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>


Enter Your Search Query