I assume that you have not installed a Laravel application yet.
Step 1: Create a Laravel application by copy and paste the first command and cd into your root directory:
- composer create-project laravel/laravel my-project
- cd my-project
Step 2: Now that we have a Laravel application, copy the following commands to install Tailwind:
- npm install -D tailwindcss postcss autoprefixer
- npx tailwindcss init -p
Step 3: When the installation has done, scroll down a bit you will see a file called 'tailwind.config.js', remove the content section and replace with this code content section below:
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
Step 4: In the root directory of your Laravel applications go to './resources/css/app.css file.' remove everything copy and paste the code below:
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5: Copy and paste this inside the head element of HTML in your blade templates:
@vite(['resources/css/app.css', 'resources/js/app.js'])
Last step: Open two separate terminals in your IDE and run these two commands:
1. For running your Laravel applications 'php artisan serve'
2. For Vite to compile and reload your Tailwind CSS 'npm run dev'
Note: Do not wrap the command with neither single nor double quotes . You are now can write Tailwind in your blade templates.
Example: <p class="text-blue-500 text-center font-bold text-2xl mt-10">Hello World<p>