What is Tailwind? Tailwind is high customizable CSS Framework that can help you styling your web page. It’s like Bootstrap but with more lower level customizable.
In this post, I’ll show you how to setup tailwindcss into our Laravel project.
Create new Project
Open your terminal or command prompt, enter this command.
laravel new tailwindbasic
Wait until installation is done. Enter this newly created project folder.
Install tailwind via NPM
We can install tailwind to our project using NPM. Actually we can use CDN version, for quick demo. But, we can’t use Tailwinds’s customization features. For this post, we will use npm. Use following command to install.
npm install tailwindcss --save-dev
Add Tailwind to project CSS
Open app.scss in folder resources/sass/. Add this lines to inject some Tailwind’s features.
@tailwind base;
@tailwind components;
@tailwind utilities;
Create Tailwind Config File
This is optional step. If you want to customize your tailwind, we can utilize this file.
npx tailwindcss init
It will create tailwind.config.js file.
Build CSS
Almost there. Let’s open webpack.mix.js. Add this line below const mix = require(‘laravel-mix’);
const tailwindcss = require('tailwindcss');
Add options in our mix.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('tailwind.config.js') ],
});
There is bug in mix’s dependencies. So, to use Sass with tailwind, we disable processCssUrls.
Tailwind is ready
Run this command to build Tailwind into our css.
npm run dev
Now, we can use Tailwind in our Laravel project. Don’t forget to add this code in your head tag
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
If you have any questions, leave comment below!