In this article, we will see how to install tailwind CSS in laravel 9. Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero runtime.
So, let's see how to install tailwind css in laravel 9, install tailwind in laravel 9, laravel tailwind css, laravel breeze tailwind, tailwind laravel mix, laravel 9 tailwind css install, install tailwind css via npm, install tailwind css with jetstream, laravel 9 breeze install tailwind css.
In this step, we will install the laravel app using the below command.
composer create-project laravel/laravel new-appNow, we will install CSS using the below command.
npm install -D tailwindcss
npx tailwindcss init Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: ["./src/**/*.{blade.php,html,js}"],
theme: {
extend: {},
},
plugins: [],
}Now, open the webpack.mix.js file and add lines there.
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]); Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;Now, run the npm install command and then build it with the npm run watch command.
npm installBuild npm process.
npm run watchNow, you can use CSS in the blade file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container mx-auto px-10">
<h1 class="text-3xl font-bold underline">
How To Install Tailwind CSS In Laravel 9 - Websolutionstuff
</h1>
<p> Hello world! </p>
</div>
</body>
</html>You might also like:
- Read Also: Bootstrap Modal In Angular 13
- Read Also: Drag And Drop Div Using jQuery
- Read Also: How To Add Bootstrap Modal In Laravel
- Read Also: Bootstrap Session Timeout Example In Laravel
