.png)
- Dynamic page title
- Active Link
- Responsive for desktop, laptop, tablet, and smartphone
- Ready to use
Step-by-step guide to setting up Tailwind CSS in a Laravel project.
If you don’t already have a Laravel project set up, create a new one using Composer.
Terminal:
composer create-project laravel/laravel my-project
cd my-projectInstall Tailwind CSS along with its peer dependencies via npm. Then run the init command to generate the configuration files for Tailwind and PostCSS.
Terminal:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pThis will generate the following files:
- tailwind.config.js
- postcss.config.js
Add the paths to all of your template files in the tailwind.config.js file. This ensures Tailwind only processes the necessary files.
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./public/**/*.*",
],
theme: {
extend: {},
},
plugins: [],
}Add the Tailwind directives to your main CSS file, typically located at ./resources/css/app.css.
app.css:
@tailwind base;
@tailwind components;
@tailwind utilities;For Laravel 9 and above, Vite is the default build tool. Run the following command to start the build process:
Terminal:
npm run devInclude the compiled CSS file in your Blade view using Vite.
app.blade.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>