Start
Before beginning, make sure you have Composer and npm installed.
First, create a Laravel project.
Install dependencies
Next, install Laravel's npm dependencies by running the following commands:
npm install
npm install tailwindcss
Sass comes with Laravel, so you don't need to install it manually.
tailwind.config.js
You may want to create a tailwind.config.js
file by running:
npx tailwindcss init
in your root folder.
webpack.mix.js
Inside webpack.mix.js
, require tailwindcss
:
const tailwindcss = require('tailwindcss');
Update your code to read as such:
mix.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
})
where app.scss
is the name of your main SCSS file.
For each extra SCSS file you have, add another snippet of code. Example:
mix.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
})
.sass('resources/sass/app2.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
})
Previewing Changes
To preview changes to your SCSS files as soon as you make them, run npm run watch
as you edit. Every time a SCSS file listed in webpack.config.js
is updated, your files will be built again. Make sure to disable caching in your browser first, or the newly built files will not be loaded, and the browser will continue to use your old files.
That's it! Now you're all set. :D