How to install Tailwind CSS with Svelte + Vite!

Introduction

If you read the title, you know what the post is about. Let's not waste any time here and jump straight into it!

Step 1

Set up a Vite + Svelte project using documentation on the Vite or Svelte website.

Step 2

Run the following commands.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

Step 3

In the newly created tailwind.config.cjs file, add this line of code.

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Then make an app.css file in the src directory with this code in it.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4

Then in your main.js file, make sure to include the app.css file using an import statement.

import './app.css'

Then all you need to do is run your code and make sure everything is working.

npm run dev

Comments

[Miguel Langarano]

Very easy to do!

[Hrvoje Bartolin]

Thanks, so easy.. :-)