Add Tailwind CSS to any Laravel project
Introduction to Tailwind CSS in Laravel
Tailwind CSS is a great CSS framework based on the utility-first approach. I wrote extensively about it already (Tailwind CSS: the ultimate guide to get started) if you want to get up to speed.
Let’s see how easy it is to add it to your Laravel project.
How to add Tailwind CSS to any Laravel project
Create a new Laravel project with Jetstream
If needed, you can create a new Laravel using Jetstream, which sets your front with Tailwind CSS and the JavaScript framework of your choice.
laravel new example --jetOnce you run npm install and npm run dev, using Tailwind CSS is a breeze!
Add Tailwind CSS in Laravel via NPM/Yarn/Bun
If you are not creating a new Laravel project, you should leverage your JavaScript package manager, no matter if it’s NPM, Yarn, or Bun.
Tailwind CSS requires other dependencies such as PostCSS, and one of its plugins called autoprefixer. Actually, Tailwind CSS itself is a PostCSS plugin.
If you are using NPM, run the following command:
npm install autoprefixer postcss tailwindcssIf you are using Yarn:
yarn add autoprefixer postcss tailwindcssIf you are using Bun:
bun add autoprefixer postcss tailwindcssPublish Tailwind’s configuration file in your Laravel codebase
Tailwind CSS is an extremely customizable framework. You will also need to configure where it should look to purge all its unused classes to slim down your final file size.
If you are using NPM, run the following command:
npx tailwindcss init -pIf you are using Yarn:
yarn tailwindcss init -pIf you are using Yarn:
bun run tailwindcss init -pHere’s what your newly generated tailwind.config.js file should look like:
/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [],}The ìnit the command also generated another config file, postcss.config.js*, that instructs PostCSS to use Tailwind CSS and autoprefixer:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },}Add Tailwind’s directives to your CSS
In resources/css/app.css, add the following directives:
@tailwind base;@tailwind components;@tailwind utilities;/* This one is not necessary. Tailwind willautomatically inject it at compile time. */@tailwind variants;Tailwind CSS will now add its utility classes in your final app.css file whenever you are compiling your project.
Compile your project with Tailwind CSS
Using Vite, Laravel offers by default to compile your assets using two commands.
This one allows you to automatically refresh your browser whenever you make a change to a file:
If you are using NPM, run the following command:
npm run devIf you are using Yarn:
yarn devIf you are using Bun:
bun run devAnd this one lets you compile your CSS (and JavaScript) for production:
If you are using NPM, run the following command:
npm run buildIf you are using Yarn:
yarn buildIf you are using Bun:
bun run buildEnable Tailwind CSS by linking your CSS to your webpage
Laravel exposes a new Blade directive called @vite. It lets you automatically add the necessary link HTML tag to style your webpage:
<!DOCTYPE html><html> <head> … @vite('resources/css/app.css') </head> <body> … </body></html>That’s it, you’re now done with the boring work. Go build something great!
0 Comments
CAN FEEDBACK
Emoji