How to install and configure TailwindCSS in Laravel 9?

<How to install TailwindCSS>

*laravel/framework -> 9.19, vite -> 3.0.0

Please refer to the official documentation (https://tailwindcss.com/docs/guides/laravel) and recommend to follow my guide if you failed that one. 

1. Command the line below in the project directory. 

# check if the libraries have been added to package.json
npm install -D tailwindcss postcss autoprefixer
# it generates "tailwind.config.js"
npx tailwindcss init

*Make sure that you already installed node.js for further installation.

2. Add contents that tailwind will apply to in tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Generate and configure postcss.config.js

* It should be located in the same level with tailwind.config.js. 

4. Check plugins in vite.config.js.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

5. Import tailwind directives in app.css.

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

5. Import app.css in app.js

import './bootstrap';
import '../css/app.css';

6. Import tailwindcss-applied javascript file to the index php blade file with Vite.

7. npm run build

8. npm run dev

9. php artisan serve

 

 

🫠 Add "watch" script in your package.json (it concerns only vite) if you are willing to run 'watch' mode.