Getting TailwindCSS and SCSS or SASS to play nice with the newest Laravel 11 release is a game-changer for web developers. It’s like mixing your favorite ice cream flavors – you get the best of both worlds does n’t it sound that way! Well let’s see how it goes here we would explain everything in step to step guide so you could get the grasp of it completely. You can also see how to use tailwindcss using Vite here and also Vite React code examples. Well, in the beginning we have to install the latest laravel version and then the whole thing will go on afterwards. As I’m writing this in September 2024, Laravel 11 is the new kid on the block. To kick things off, open up your terminal and type:
composer create-project laravel/laravel tailwind-sass-projectThis command is going to whip up a fresh Laravel project faster than you can say “artisan serve”. Once it’s done, hop into your new project folder:
cd tailwind-sass-projectNow, we would invite TailwindCSS to the main scene and we would follow that step since we already have Laravel’s here – it’s packing a TailwindCSS preset that would introduce below:
php artisan ui tailwindcssBoom! TailwindCSS is also installed here. But hey wait, we have not been done yet. We want to bring SASS loader to this guide too too by installing it. Time to install a couple more packages:
npm install sass sass-loader --save-devGreat! Now we have got all our ingredients. Time to mix them together. We need to tweak our webpack.mix.js file to tell Laravel Mix how to handle our SASS and TailwindCSS together in a bit. So let’s open up that file and replace everything in it with this tasty code snippet:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('tailwindcss'),
]
});
if (mix.inProduction()) {
mix.version();
}So here you would notice that this setup is telling Mix to compile our JavaScript, process our SASS, and then run the result through TailwindCSS which you would see in a bit below. Next up, we need to create our main SASS file. This is where the magic happens. Create a new file at resources/sass/app.scss and fill it with this:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
// Your custom SASS styles go here
body {
font-family: 'Nunito', sans-serif;
}
.custom-button {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
&:hover {
@apply bg-blue-700;
}
}Now you would see that this file is going to import all the TailwindCSS elements and giving us a place to add our own SASS styles. I’ve thrown in a custom button class as an example of how you can use SASS and TailwindCSS together. Well, looks like we are ready to go. Now, let’s see if our concoction works. Run this command to compile everything:
npm run devIf all goes well which we see here, you should see some new CSS and JavaScript files in your public directory. It’s alive! To test our creation, let’s get the view now. Create (or modify) the file at resources/views/welcome.blade.php and paste in this code that you would see below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailwindCSS + SASS in Laravel</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto mt-8">
<h1 class="text-4xl font-bold text-center text-blue-600">Welcome to the TailwindCSS and SASS Party!</h1>
<p class="mt-4 text-center">This page is rocking TailwindCSS utility classes and custom SASS styles.</p>
<div class="text-center mt-8">
<button class="custom-button">Click me!</button>
</div>
</div>
</body>
</html>To make this page show up and you would actually see it works when you visit your site, by updating the routes/web.php file:
Route::get('/', function () {
return view('welcome');
});Now, fire up your Laravel development server:
php artisan serveSo when in order to view everything we would visit http://localhost:8000 in our browser. If you see a styled page with a fancy blue button, congratulations you have it there! You’ve successfully set up TailwindCSS with SASS in Laravel. As you continue building the project you have been working and you find this setup empowers you. You can rapidly prototype with TailwindCSS classes, and when you need more control, you’ve got SASS at your fingertips. Sarah Drasner, a renowned web developer and Vue core team member, once said, “The combination of utility-first CSS and preprocessors like SASS allows for rapid development without sacrificing the ability to create complex, custom designs. It’s a powerful toolset for modern web development.” So there you have it! You’re now equipped with a turbocharged frontend setup in Laravel. As you’re coding away, you’ll find yourself thinking, “Wow, I could have been struggling with complex CSS hierarchies, but instead, I’m building beautiful interfaces faster than ever!” Happy coding, and may your stylesheets always be clean and your designs always responsive!
