Use Tailwind in Laravel
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:
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.