Tailwind CSS is a popular utility-first CSS framework that allows you to quickly build modern and responsive user interfaces. Laravel, a powerful PHP web application framework, integrates seamlessly with Tailwind CSS, providing an excellent combination for web development. In this tutorial, we’ll walk through the process of install Tailwind CSS in Laravel 10, step by step.
Prerequisites
Before we begin, make sure you have the following installed on your system:
- Laravel 10 (you can install it using Composer)
- Node.js and NPM (Node Package Manager)
Step 1: Create a new Laravel project
If you haven’t already created a Laravel project, you can do so using the following command:
composer create-project laravel/laravel my-laravel-project
Replace my-laravel-project with the desired project name.
Step 2: Install Tailwind CSS
Once your Laravel project is set up, navigate to the project directory using the terminal and run the following commands to install Tailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
This command installs Tailwind CSS, PostCSS (a tool for transforming styles), and Autoprefixer (a PostCSS plugin for vendor-prefixing). The -D flag denotes that these packages are development dependencies.
Step 3: Create Tailwind CSS Configuration Files
Next, you need to generate the configuration files for Tailwind CSS. Run the following command:
npx tailwindcss init -p
This command creates a tailwind.config.js file and a postcss.config.js file in your project root.
Step 4: Configure your stylesheets
Open the resources/css/app.css file and import Tailwind CSS at the beginning:
/* resources/css/app.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Your additional styles go here */
This imports the base, components, and utilities stylesheets from Tailwind CSS.
Step 5: Build your stylesheets
Run the following command to build your CSS file with Tailwind styles:
npx postcss resources/css/app.css -o public/css/app.css
This command processes your app.css file and outputs the result to public/css/app.css.
Step 6: Include the CSS file in your Laravel views
Open your Blade layout file (usually resources/views/layouts/app.blade.php) and include the generated CSS file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- other head elements -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<!-- your content here -->
</body>
</html>
Now, your Laravel project is set up with Tailwind CSS. You can start using Tailwind utility classes in your views and components.
Step 7: Testing
To verify that Tailwind CSS is working correctly, add a sample Tailwind class to one of your HTML elements. For example, in one of your Blade views:
<div class="bg-blue-500 text-white p-4">
This is a Tailwind CSS styled div.
</div>
If everything is set up correctly, you should see a blue box with white text when you view your application in the browser.
Congratulations! You have successfully install Tailwind CSS in your Laravel 10 project. Feel free to explore Tailwind’s extensive documentation to make the most of its features and capabilities. Happy coding!
- Check our tools small Tools
- Check our tools website Word count
