Using Tailwind CSS with Laravel
The first thing we do is configure Vite, so we can enable styling using Tailwind CSS.
First open the the terminal, and run this:
npm install -D tailwindcss postcss autoprefixerIf you don’t have npm installed yet, install Node.js first.
This command will create a package.json file, a package-lock.json and a node_modules folder.
Then run this:
npx tailwindcss init -pThis will create the tailwind.config.js and the postcss.config.js files.
(see my npx tutorial if you’re new to that, it’s installed automatically with Node.js, as npm).
Now open tailwind.config.js and add this:
/** @type {import('tailwindcss').Config} */
export default {
content: [**"./resources/**/*.blade.php"**],
theme: {
extend: {},
},
plugins: [],
};In resources/css/app.css add this:
@tailwind base;
@tailwind components;
@tailwind utilities;Finally, back to the terminal, run npm run dev and keep it running while developing the site, as php artisan serve (run both in 2 different terminal windows).
Now we’re ready to use Tailwind CSS in our Blade templates!
Add this line to the page head:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
If you refresh the page, you can see immediately that something changed on your page. It’s Tailwind adding some default normalization, so that’s a sign it’s working!
Now we can add classes to our HTML body to style the page a bit, like this
<p class="font-bold border-b-gray-300 border-b pb-2 mb-3">
Test
</p>Notice that changes are applied automatically when you save the file in VS Code, without refreshing the page. Both changes in the Blade template, and in the Tailwind CSS classes. That’s some “magic” provided by Vite and Laravel in development mode.
download all my books for free
- javascript handbook
- typescript handbook
- css handbook
- node.js handbook
- astro handbook
- html handbook
- next.js pages router handbook
- alpine.js handbook
- htmx handbook
- react handbook
- sql handbook
- git cheat sheet
- laravel handbook
- express handbook
- swift handbook
- go handbook
- php handbook
- python handbook
- cli handbook
- c handbook
subscribe to my newsletter to get them
Terms: by subscribing to the newsletter you agree the following terms and conditions and privacy policy. The aim of the newsletter is to keep you up to date about new tutorials, new book releases or courses organized by Flavio. If you wish to unsubscribe from the newsletter, you can click the unsubscribe link that's present at the bottom of each email, anytime. I will not communicate/spread/publish or otherwise give away your address. Your email address is the only personal information collected, and it's only collected for the primary purpose of keeping you informed through the newsletter. It's stored in a secure server based in the EU. You can contact Flavio by emailing [email protected]. These terms and conditions are governed by the laws in force in Italy and you unconditionally submit to the jurisdiction of the courts of Italy.