How to install Tailwind CSS with Laravel

Tailwind in Laravel
Laravel developers are always looking for ways to streamline their development process while maintaining flexibility in design. Tailwind CSS has become a popular choice for styling Laravel applications due to its utility-first approach and ease of customization. In this guide, we’ll walk you through the steps to install and use Tailwind CSS in your Laravel project, complete with code examples and tips for both beginners and advanced users.
Table of content
- Why Choose Tailwind CSS for Laravel?
- Prerequisites
- Step 1: Create a Laravel Project
- Step 2: Install Tailwind CSS
- Step 3: Configure tailwind.config.js
- Step 4: Add Tailwind Directives to Your CSS
- Step 5: Compile Assets with Laravel Mix
- Creating a sample application
- Ways to Increase the efficiency of Using Tailwind CSS in your Application
- Conclusion
Why Choose Tailwind CSS for Laravel?
Tailwind CSS offers several advantages over traditional CSS frameworks like Bootstrap or Bulma:
- Utility-First Approach: Write styles directly in your HTML without switching contexts.
- Highly Customizable: Tailor the framework to fit your project’s unique needs.
- Lightweight: Only include the styles you need, reducing bundle size.
- Responsive Design Tools: Built-in utilities make it easy to create responsive layouts.
These features make Tailwind CSS an excellent choice for Laravel developers who want to build fast, maintainable, and visually appealing applications.
Prerequisites
Before getting started, ensure you have the following installed on your machine:
- PHP (v7.4 or later): Download from PHP Official Website .
- Composer : PHP package manager. Install it from Get Composer .
- Node.js (v16 or later): Download from Node.js Official Website .
- npm or yarn : Comes bundled with Node.js.
- Basic Knowledge of Laravel: Familiarity with Laravel concepts will help you understand the integration better.
Step 1: Create a Laravel Project
If you haven’t already created a Laravel project, you can do so using Composer:
composer create-project --prefer-dist laravel/laravel my-laravel-app
Replace my-laravel-app
with your desired project name. Navigate into the project directory:
cd my-laravel-app
This command sets up a new Laravel project with all the necessary files and configurations.
Step 2: Install Tailwind CSS
To integrate Tailwind CSS into your Laravel project, follow these steps:
- Option 1: Using the CLI Tool (Recommended) Run the following command to install Tailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
After installation, initialize Tailwind CSS by running:
npx tailwindcss init -p
This creates two essential configuration files:
tailwind.config.js
: For customizing Tailwind CSS.postcss.config.js
: For configuring PostCSS.
Step 3: Configure tailwind.config.js
Open the tailwind.config.js
file in your project root and configure it according to your needs. Here’s an example configuration:
module.exports = { content: [ "./resources/**/*.blade.php", // Blade templates "./resources/**/*.js", // JavaScript files "./resources/**/*.vue", // Vue components (if using Vue) ], theme: { extend: { colors: { primary: "#1da1f2", // Example custom color }, }, }, plugins: [],};
The content
property specifies which files Tailwind should scan for class names. Ensure you include all relevant paths to avoid missing styles.
Step 4: Add Tailwind Directives to Your CSS
Open the resources/css/app.css
file (or create one if it doesn’t exist) and add the following Tailwind directives:
@tailwind base;@tailwind components;@tailwind utilities;
These directives import the base styles, component styles, and utility classes provided by Tailwind CSS.
Step 5: Compile Assets with Laravel Mix
Laravel uses Laravel Mix to compile assets. Open the webpack.mix.js file in your project root and update it as follows:
const mix = require("laravel-mix");
mix .js("resources/js/app.js", "public/js") .postCss("resources/css/app.css", "public/css", [ require("tailwindcss"), require("autoprefixer"), ]);
Now, compile your assets using the following commands:
npm installnpm run dev
For production builds, use:
npm run prod
This ensures your Tailwind CSS styles are compiled and ready for use.
Creating a sample application
You’re now ready to start using Tailwind CSS in your Laravel Blade templates! Here’s an example of a simple Form styled with Tailwind:
<body> <div class="bg-gradient-to-br from-purple-900 to-indigo-900 flex flex-wrap items-center justify-center min-h-screen"> <form class="w-full max-w-md bg-white shadow-md rounded px-8 pt-8"> <div class="mb-4"> <label class="text-gray-800 text-sm block font-bold mb-2 pb-2">Username</label> <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username"> </div> <div class="mb-6"> <label class="block text-gray-700 text-sm font-bold mb-2">Password</label> <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="**************"> <p class="text-purple-500 text-xs italic">Please choose a Password.</p> </div> <div class=" flex items-center justify-between"> <button class="bg-purple-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button"> Sign in </button> <a class="inline-block align-baseline font-bold text-sm text-indigo-500 hover:text-indigo-900" href="#"> Forgot Password? </a> </div> <div class="px-8 pt-8"> <p class="text-center text-gray-900 text-xs font-bold">@2023 Devwares develop. All rights reserved. </p> </div> </form>
</div> </body></html>
Below is how our webpage should look once we have saved our file. And reloaded our server.
Preview
Ways to Increase the efficiency of Using Tailwind CSS in your Application.
Purge Unused Styles in Production
To optimize performance, remove unused styles in production builds. Update your tailwind.config.js file:
module.exports = { content: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'], purge: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'], // Deprecated in newer versions; use `content` instead. theme: { extend: {}, }, plugins: [],};
Then, run the production build command:
npm run prod
Customize Breakpoints
Tailwind allows you to define custom breakpoints for responsive design. Update the theme section in tailwind.config.js
:
theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', },},
Now, you can use these breakpoints in your Blade templates:
<div class="md:w-1/2 lg:w-1/3 xl:w-1/4"> <!-- Content --></div>
Integrate with Plugins
Enhance Tailwind with plugins like Tailwind Typography for beautiful typography:
npm install @tailwindcss/typography
Then, add the plugin to your tailwind.config.js:
plugins: [ require('@tailwindcss/typography'),],
Conclusion
With Tailwind CSS, Laravel developers can achieve rapid development, high customization, and lightweight styling. Whether you're a beginner or an advanced user, Tailwind CSS offers tools and features to meet your needs. By following this guide, you’ve learned how to install and use Tailwind CSS in your Laravel project, along with advanced tips to take your skills further.
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
