Here i will tell you how to add tailwindCss to your laravel project.
First install tailwindCss, postCss and autoprefixer packages to your project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Second add tailwindCss to laravel-mix configuration
on webpack.mix.js add following code
const mix = require('laravel-mix');
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS
at './resource/css/app.css add this tailwind directives
@tailwind base;
@tailwind components;
@tailwind utilities;
Then add link style on your blade file
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
Lastly you can compile laravel-mix
make sure you have alredy set "npm run watch:mix" watch on package.json
npm run watch
Now you can use tailwindcss on your laravel project
Top comments (0)