Tailwind not getting imported in Laravel - laravel

Question

I have a Laravel project and I'm trying to install Tailwind.
I have a tailwind.css file: \resources\assets\stylesheets\tailwind.css
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Which I import in:\resources\assets\stylesheets\index.css
#import "tailwind.css"
My webpack.mix.js file:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
And tailwind.config.js:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
When I run the app and check the generated http://localhost/dist/css/app.css I see this:
/* Import Tailwind*/
#tailwind base;
#tailwind components;
#tailwind utilities
I've installed tailwind through npm, can also find the tailwind folder in my node_modules folder.

Answer 1

Have you included index.css in your app.scss file?
You really don't need to put Tailwind through a sass parser if all you're doing is including the base styles etc. anyway.
Assuming you have Tailwind installed as a dependency already, you can include Tailwind in your project as follows:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/assets/stylesheets/index.css', 'public/css', [
require('tailwindcss'),
]);