Is there any code sample that integrates Laravel with Tailwind CSS?

I am trying to add Tailwind CSS to my freshly created Laravel project, I went to Tailwind CSS documentation

What I have added in my webapack.mix.js is the line .sass("resources/sass/app.scss", "public/css") and require("tailwind").

I have also added:

        "sass": "^1.20.1",
        "sass-loader": "^8.0.0"

to my dependencies to my package.json, ran npm install and when I run npm run dev it throws me the error like this

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (D:\blog\node_modules\postcss\lib\processor.js:61:15)
    at new Processor (D:\blog\node_modules\postcss\lib\processor.js:10:25)
    at postcss (D:\blog\node_modules\postcss\lib\postcss.js:26:10)
    at Object.loader (D:\blog\node_modules\postcss-loader\dist\index.js:87:20)
    at processResult (D:\blog\node_modules\webpack\lib\NormalModule.js:703:19)
    at D:\blog\node_modules\webpack\lib\NormalModule.js:809:5
    at D:\blog\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\blog\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\blog\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (D:\blog\node_modules\postcss-loader\dist\index.js:96:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rafay\AppData\Roaming\npm-cache\_logs\2021-05-28T19_41_44_049Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rafay\AppData\Roaming\npm-cache\_logs\2021-05-28T19_41_44_083Z-debug.log

This is my folder structure of my project

Solution

I know the following is all in the TailwindCSS docs and you've followed them, but just for conciseness lets start at the beginning.

You don't need to use sass processors with TailwindCSS, you can customise TailwindCSS through the tailwind.config.js file.

Add tailwindcss to your package.json devDependencies. You might also want to include the optional forms and typography packages.

"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"autoprefixer": "^10.0.2",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1"

Update your webpack.mix.js file to require tailwindcss etc.

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Initialise your tailwind.config.js.

npx tailwindcss init

Add the base styles to your app.css file

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

In order to keep your CSS filesize small, tell Tailwind to purge any CSS styles that are not found in files specified in the purge array of your tailwind.config.js file. You can add/remove as you see fit.

purge: [
    './resources/views/**/*.blade.php',
    './resources/views/**/*.js',
    './resources/views/**/*.vue',
],

If you have installed and configured it correctly, you should be able to run npm run dev successfully.

You can find an example repo with a fresh install of Laravel and TailwindCSS here if that helps.