DEV Community

Alti
Alti

Posted on

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: []
};
Enter fullscreen mode Exit fullscreen mode

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 4

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

import './app.css'
Enter fullscreen mode Exit fullscreen mode

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

Discussion (0)