# Using Tailwind CSS with Laravel
> Learn how to set up Tailwind CSS in a Laravel project with Vite, installing the packages, adding the @tailwind directives, and running npm run dev to compile.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-06-17 | Topics: [Laravel](https://flaviocopes.com/tags/laravel/) | Canonical: https://flaviocopes.com/using-tailwind-css-with-laravel/
The first thing we do is **configure** [**Vite**](https://flaviocopes.com/vite-tutorial/)**,** so we can enable styling using **Tailwind CSS**.
First open the the terminal, and run this:
```php
npm install -D tailwindcss postcss autoprefixer
```
If you don’t have `npm` installed yet, [install Node.js](https://flaviocopes.com/node-installation/) first.
This command will create a `package.json` file, a `package-lock.json` and a `node_modules` folder.
Then run this:
```php
npx tailwindcss init -p
```
This will create the `tailwind.config.js` and the `postcss.config.js` files.
(see my [npx tutorial](https://flaviocopes.com/npx/) if you’re new to that, it’s installed automatically with [Node.js](https://flaviocopes.com/nodejs/), as `npm`).
Now open `tailwind.config.js` and add this:
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: [**"./resources/**/*.blade.php"**],
theme: {
extend: {},
},
plugins: [],
};
```
In `resources/css/app.css` add this:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Finally, back to the terminal, run `npm run dev` and keep it running while developing the site, as `php artisan serve` (run both in 2 different terminal windows).
Now we’re ready to use Tailwind CSS in our Blade templates!
Add this line to the page `head`:
```javascript
@vite('resources/css/app.css')
```
If you refresh the page, you can see immediately that something changed on your page. It’s Tailwind adding [some default normalization](https://tailwindcss.com/docs/preflight), so that’s a sign it’s working!
Now we can add classes to our HTML body to style the page a bit, like this
```javascript
Test
```
Notice that changes are applied automatically when you save the file in VS Code, without refreshing the page. Both changes in the Blade template, and in the Tailwind CSS classes. That’s some “magic” provided by Vite and Laravel in development mode.