In this short tutorial, I will go over on how you can install TailWindCSS on Laravel project.
TailWindCSS is a utility-first based CSS framework, and is gaining a lot of popularity because of its ease of use and customer satisfaction.
Although you can install tailwind on any of your Laravel Project (old or new). For the demonstration purpose, Let’s install a fresh Laravel project and then we will install TailWindCSS on it
Step 1: Fresh Laravel Installation
I created a new laravel application on my machine named LaravelTailWind with following command
laravel new LaravelTailWind
This command will create a new Laravel project on my machine with the basic laravel directory structure.
Next Up, We will start with the TailWindCSS installation, Import the project in your editor / IDE.
Step 2: Install TailWind via NPM
We will install TailWind via node package manager
To run the npm command make sure you have node installed on your machine. To check if it is installed go to your terminal / command-line and run comand
node -v
, If this gives you the version number of node installed on your machine, you are good to go. If not then first you have to install node.
Open Terminal / Command-line and navigate to the project root directory and run the following command.
npm install tailwindcss
This will fetch the required dependencies and will install tailwindcss on your project. You should see a new folder named tailwindcss inside node_modules folder in your project.
Step 3: Add TailWind to CSS
Now, we are ready to use tailwind css in your project. By default Laravel project comes installed with Bootstrap as a default front-end framework. Since we are going to use tailwind css we will remove the bootstrap imports and replace them with tailwindcss.
Open file app.scss which is located under folder resources > sass.
Remove the following import from the file
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
Replace the content with the following imports
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 4: Create your Tailwind config file
Next up, we need to generate a tailwind config file, This fill will be used by laravel mix (webpack) while converting the scss file into css.
Run the following command to generate the config file.
npx tailwind init
This command will generate tailwind.config.js
file in your project root directory.
// tailwind.config.js
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Step 5: Include Tailwind in Laravel Mix Build Process
Next up, we need to tell Laravel Mix (which internally uses webpack) to compile tailwind sass using the tailwind configuration file.
Open the webpack.mix.js
file and make the following changes.
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js');
const tailwindcss = require('tailwindcss')
mix.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('tailwind.config.js') ],
})
Step 6: Run NPM
We are now ready to run the npm build process, run the following command in your terminal / command-line
npm install
npm run dev
This will compile you tailwindcss code and will put them into app.css
file located in public / css directory.
That’s all about the installation.
Step 6: Test
Let’s test if we can use the tailwindcss utility classes in your project.
You can import the compiled css file in your view file, put it in welcome.blade.php
for testing
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
And I posted this code to test tailwind utility based css framework.
<div class="md:flex container border p-4">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
<a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
There you go, Here is what I get as the output on screen.
Have fun working with TailWindCSS on laravel.
GitHub Repo of Laravel Project with TailWindCSS Installed: https://github.com/tushargugnani/laraveltailwind
4 comments On Getting Started with TailWindCSS on Laravel
Perfect guide to initially learn this, and then refer back to when I completely forget.
Bookmarked and will be recommending, straight to the point.
Thanks Alan. Glad this tutorial helped.
Hi, i want create laravel api for multiple form data can i get help from team
Sure. Mail me on tushar @ 5 balloons.info