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

After got tailwind installed, we can use @tailwind directive in your .css file

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure Laravel Mix configuration

Open the mix configuration file, let add this configuration to your file

const tailwindcss = require('tailwindcss');

mix.postCss('resources/css/sample.css', 'public/css', [
  tailwindcss
]).options({
  postCss: [
    tailwindcss('./tailwind.config.js')
  ]
}).purgeCss();

You can adjust this configuration block to suit your own project.

It also support preprocessor such as sass

const tailwindcss = require('tailwindcss');

mix.sass('resources/css/sample.css', 'public/css').options({
  postCss: [
    tailwindcss('./tailwind.config.js')
  ]
}).purgeCss();

Compile

After the above steps, you are ready to compile your tailwind css, simple run

# Using npm
npm run production

# Using yarn
yarn production