Tailwind a very low-level CSS framework that only includes classes but does not contain any pre-defined components. This means you can define your own component styles without override the styles come with the CSS framework.

To have a better understanding of Tailwind, please read the official website: https://tailwindcss.com

Here are the steps that integrates the tailwind into your Laravel project:

Install

First, let's install the tailwind itself

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Then, let's install the PurgeCSS to cut off classes that we did not use to save our final css file size

# Using npm
npm install laravel-mix-purgecss --save-dev

# Using Yarn
yarn add laravel-mix-purgecss --dev

Create a configuration file

npx tailwind init

After ran the above command, you will find tailwind.config.js was generated on your project root directory.

Import Tailwind

Afte

...

[ Read More ]