So, in this guide or tutorial we would show you how to set up TailwindCSS with SASS using Vite in the latest Laravel 11 is achieving the arsenal you need to complete the kit – it’s versatile, efficient, and incredibly powerful for our projects. You could also go through our previous similar tutorial on using TailwindCSS with SCSS and also using Vite with Tailwind so I am going to walk through this process step by step, shall we? First off, we need to get our hands on the newest Laravel project built on its latest version 11 or later. Open up your terminal and let’s create a spanking new project:
composer create-project laravel/laravel tailwind-sass-vite-projectSO having used your terminal and created that project we would move to the next level of this project. Let’s jump into our new project folder:
cd tailwind-sass-vite-projectNow, here’s where things get interesting which we would show you that Laravel 11 comes with Vite out of the box, which is a game-changer for our frontend building process and that would excite you while reaching the end even though still a long way to go. It’s blazing fast and comes with hot module replacement, which means we will see our changes almost instantly.
Let’s start by installing TailwindCSS and its peer dependencies:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestNext, we would create a TailwindCSS configuration file:
npx tailwindcss init -pThis command creates two files — tailwind.config.js and postcss.config.js. We need to update tailwind.config.js to tell Tailwind where to look for our classes and open it up and replace its contents with:
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}Now, let’s add SASS to our project we are building on Laravel 11.
npm install -D sassYou coul see above we have installed SASS next we need to update our Vite configuration. Open vite.config.js and modify it to look like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});Next, let’s create our main SASS file and also do create a new file at resources/sass/app.scss and add the following:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
// Your custom SASS styles
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, we need to tell Vite to process this SASS file and also update resources/js/app.js to import our SASS:
import '../sass/app.scss'We are almost there so we would update our main Blade template to use our new styles. Open resources/views/welcome.blade.php and replace its contents with:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel with TailwindCSS, SASS, and Vite</title>
@vite(['resources/js/app.js'])
</head>
<body class="antialiased bg-gray-100">
<div class="container mx-auto mt-8">
<h1 class="text-4xl font-bold text-center text-blue-600">Welcome to Laravel with TailwindCSS, SASS, and Vite!</h1>
<p class="mt-4 text-center">This page is styled using TailwindCSS utility classes and custom SASS.</p>
<div class="text-center mt-8">
<button class="custom-button">Click me!</button>
</div>
</div>
</body>
</html>Finally, let’s start our developmnt server:
npm run devIn a separate terminal, start your Laravel server:
php artisan serveNow, when you visit http://localhost:8000 in your browser, you should see a beautifully styled page with a custom button. Any changes you make to your SASS or Blade files will be instantly reflected in the browser, thanks to Vite’s hot module replacement. As you continue developing, you’ll find this setup incredibly efficient. You can use TailwindCSS utility classes for rapid prototyping, and when you need more complex styles, you’ve got the power of SASS at your fingertips. Sarah Drasner, a renowned web developer and Vue core team member, once said, “The combination of utility-first CSS, preprocessors like SASS, and modern build tools like Vite creates an unparalleled developer experience. It’s the fastest way I’ve seen to go from idea to production-ready code.”
