Although you can install Tailwind CSS on any of your Laravel Project (old or new). For the demonstration purpose, let's install a new Laravel project, and then we will install Tailwind CSS on it.
Step 1: Fresh Laravel Installation
I created a new Laravel application on my machine named tailwindLaravel with the following command:
laravel new tailwindLaravel This command will create a new Laravel project with the basic Laravel directory structure.
Step 2: Install Tailwind CSS via NPM
Open Terminal / Command-line and navigate to the project root directory and run the following command.
npm install tailwindcssThis will fetch the required dependencies and will install Tailwind CSS on your project. You should see a new folder named tailwindcss inside node_modules folder in your project.
Step 3: Add Tailwind CSS 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 Tailwind CSS.
Open file app.scss 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 CSS config file
Next up, we need to generate a Tailwind CSS 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 initThis command will generate tailwind.config.js file in your project root directory.
// tailwind.config.js
module.exports = {
purge: [],
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 CSS 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 devThis will compile your Tailwind CSS code and will put them into app.css file located in public/css directory.
Step 6: Test
Let’s test if we can use the Tailwind CSS utility classes in our 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">Copy-paste any Tailwind CSS code in the file.
Here I've used Horizontal Card component from Tailwind CSS website: https://tailwindcss.com/components/cardsThat should be it! You can now go to any page, template, layout or Vue file and be able to add Tailwind CSS classes to your elements and enjoy the benefits of this amazing framework.
<div class="max-w-sm w-full lg:max-w-full lg:flex">
<div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/img/card-left.jpg')" title="Woman holding a mug">
</div>
<div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
<div class="mb-8">
<p class="text-sm text-gray-600 flex items-center">
<svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
</svg>
Members only
</p>
<div class="text-gray-900 font-bold text-xl mb-2">Can coffee make you a better developer?</div>
<p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="/img/jonathan.jpg" alt="Avatar of Jonathan Reinink">
<div class="text-sm">
<p class="text-gray-900 leading-none">Jonathan Reinink</p>
<p class="text-gray-600">Aug 18</p>
</div>
</div>
</div>
</div>That should be it! You can now go to any file and be able to add Tailwind CSS classes to your elements and enjoy the benefits of this amazing framework.
