To install and set up Tailwind CSS with a Laravel-app, you can follow these steps:
- Create a new Laravel project using Composer. Open your terminal and run the following command:
composer create-project laravel/laravel laravel-tailwind-project
- Navigate to your project directory and install Tailwind CSS and its dependencies using npm:
cd laravel-tailwind-project
npm install tailwindcss postcss autoprefixer
- Write below commands for generate tailwind.config.js and postcss.config.js
npx tailwindcss init -p
- Configure your template path in your tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
- Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
- Start your build process
npm run dev
- Start using Tailwind in your laravel project, modify app.blade.php.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Setup for laravel with tailwind is finished.
Benifits of using laravel with tailwind CSS
- Efficiency and Productivity: Tailwind CSS + Laravel application without the need to write custom CSS code. This results in improved productivity and a faster development workflow.
- Developer Experience: Laravel and Tailwind CSS both prioritize developer experience. Laravel, with its elegant syntax and comprehensive documentation, provides a smooth and intuitive development experience. Tailwind CSS integrates seamlessly with Laravel through Laravel Mix, simplifying the build process and making it easy to compile and optimize CSS stylesheets.
- Customization Flexibility: Tailwind CSS's flexibility allows you to create a unique visual identity for your Laravel application, ensuring consistency and branding throughout your project.
- Scalability and Maintainability: Laravel and Tailwind CSS both prioritize scalability and maintainability.Laravel's modular structure and robust architecture enable you to build scalable applications that can grow with your project's needs. Tailwind CSS's utility classes promote a modular and component-based approach, making it easier to manage and maintain your application's stylesheets.
- Performation Optimization: Tailwind's smaller file sizes improved performance for your Laravel application. Additionally, Laravel's performance optimization features, such as caching and database query optimization, further enhance the overall performance of your application.
