There are many ways to install Tailwindcss on a fresh Laravel 8 install. You can configure your application by yourself or use a Preset to do it faster. We'll start with the custom one, skip to the end to check available presets.
Install Tailwind CSS
First, let's install NPM dependencies
npm install
Now install tailwindcss via npm
npm install tailwindcss
Add Tailwindcss to your resources/css/app.css
You don't have to install autoprefixer or postcss-import, because it's already installed with laravel mix
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Create your Tailwind config file
npx tailwindcss init
Update your webpack.mix.js file
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
Compile your assets
Finish by compiling your assets and you'll be ready.
npm run dev
Tailwind CSS Presets
There are many presets ready for installing Tailwindcss in a Laravel project, some of them even includes few auth components to get the ball rolling:
