Tailwind is a popular utility-first CSS framework that helps developers build and design their products very fast without wasting much time.
In this article, we'll be looking at how to configure & set up tailwind in a laravel project.
Before moving along, make sure you have your development environment set up for Laravel.
Let's start by bootstrapping our laravel project with the command below:
laravel new sample-app
OR
composer create-project laravel/laravel sample-app
Navigate to the project directory by doing:
cd sample-app
Let's bring our project up with the command below from the terminal:
php artisan serve
The above command will start up our project and keep it running. You can access it through your favourite browser on http://127.0.0.1:8000
Now we can install tailwindcss in our already laravel project by doing:
npm install -D tailwindcss postcss autoprefixer
Then we create the config file:
npx tailwindcss init
You should see a message like the one in the image below
Now open the project in your favourite code editor and add the following to the tailwind.config.js file inside the content array.
'./resources/**/*.blade.php',
'./resources/**/*.js',
Now we need to tell Laravel to compile our Tailwind resources using Laravel Mix. Open the webpack.mix.js file in the root of our project & include tailwindcss as a postCss plugin as seen below:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss")
]);
Lastly, we need to import all @tailwindcss component layers into our project css. Open the resources/css/app.css file and add the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Voila! Configuration is done and you can watch for changes and compile assets in real-time during development.
npx mix watch
You should have something like the image below
Let's open our welcome.blade.php file and replace everything there with the code below to test our set up:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-[#063970]">
<div class="text-center mt-12">
<h1 class="text-4xl text-white font-semibold">Welcome!!!</h1>
<p class="text-xl text-white mt-4">This is a tailwind page</p>
</div>
</body>
</html>
You should have a screen like the image below:
That's all you need to do in order to set up tailwindCSS in your laravel project.
Happy coding!
Top comments (0)