In this tutorial we will go through the steps to install Tailwind CSS by using NPM in Laravel 9 projects. These steps are simple and anyone can follow them. Tailwind css is a very dynamic and modern CSS framework which helps us to manage CSS requirements of our Laravel 9 project. We can install that using “npm”.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initThen we will put this code in “tailwind.config.js”.
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}After that we will put this code in “webpack.mix.js” file.
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"),
]);Then in “resources/css/app.css” file we will paste this code.
@tailwind base;
@tailwind components;
@tailwind utilities;Then we will run these commands
npm install
npm run watchAfter that we need to put this HTML in Welcome.blade.php to test if our Tailwind.css is working or not.
<!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 - Laramatic
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat ncupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>I hope, this article will be helpful for you. If you have any question about installing Tailwind CSS by using NPM in different types of Laravel 9 projects, please write in comments section.
