How to use Tailwind CSS in Laravel and Vite
Table of Contents
Introduction
In this tutorial, we will learn how to install Tailwind CSS in a Laravel project using Vite. With Laravel transitioning to Vite instead of Mix, this guide will walk you through the process step-by-step, based on the official Tailwind CSS documentation. If you need assistance with setting up Laravel itself, consider watching a supplementary video on that topic.
Step 1: Set Up a New Laravel Project
Before integrating Tailwind CSS, ensure you have a Laravel project ready. If you don't have one, follow these steps:
- Install Laravel via Composer:
composer create-project laravel/laravel my-project
- Navigate to your project directory:
cd my-project
Step 2: Install Vite
Vite is the new build tool that Laravel uses for asset compilation. Ensure it's properly set up in your Laravel project.
- Install the necessary Vite dependencies:
npm install
- Ensure Vite is configured in your project by checking the
vite.config.js
file. It should be present in the root of your project.
Step 3: Install Tailwind CSS
Now, let’s add Tailwind CSS to your project.
- Install Tailwind CSS and its peer dependencies via npm:
npm install -D tailwindcss postcss autoprefixer
- Initialize Tailwind CSS in your project:
This command creates anpx tailwindcss init -p
tailwind.config.js
file and apostcss.config.js
file in your project.
Step 4: Configure Tailwind CSS
Next, configure Tailwind CSS to remove unused styles in production.
- Open the
tailwind.config.js
file and set the content option:
This configuration allows Tailwind to scan your Blade, JS, and Vue files for class names to include.module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [], }
Step 5: Add Tailwind Directives
You need to include Tailwind's base, components, and utilities styles in your CSS.
- Create a new CSS file in the
resources/css
directory, e.g.,app.css
. - Add the following Tailwind directives to
app.css
:@tailwind base; @tailwind components; @tailwind utilities;
Step 6: Import the CSS File
Now, you need to tell Vite to compile your CSS file.
- Open the
resources/js/app.js
file and import the CSS:import '../css/app.css';
Step 7: Build Assets
You are now ready to compile your assets.
- Run the following command to build your assets:
This command starts the Vite development server and compiles your assets.npm run dev
Step 8: Test Tailwind CSS
To ensure Tailwind CSS is working, you can add some Tailwind classes to your Blade templates.
- Open a Blade view file (e.g.,
resources/views/welcome.blade.php
). - Add some Tailwind classes to an HTML element, for example:
<h1 class="text-3xl font-bold underline"> Hello, Tailwind CSS! </h1>
Conclusion
You have successfully installed Tailwind CSS in your Laravel project using Vite. You can now start building beautiful, responsive designs with Tailwind's utility-first approach. Remember to run npm run dev
whenever you make changes to your CSS or JavaScript files to see the updates in your browser. For further customization and best practices, refer to the Tailwind CSS documentation.