Add Tainwind Css to Your Laravel 8 Project
Since Laravel 8 doesn't know anything about Vite, you can use Tailwind Css via a simple HTML stylesheet link or you can use the NPM. It makes more sense to use the latter. If you have used Bootstrap before and are curious about Tailwind Css then follow these simple instructions below.
Set up Laravel with Tailwind Css
From the root project folder, enter npm install -D tailwindcss postcss autoprefixer followed by executing npx tailwindcss init -p which will generate the necessary files for you to work with. And then in the ./resources/css/app.css file add the following:
@tailwind base;
@tailwind components;
@tailwind utilities
That's all there is to it. Next, you only need to adjust the tailwind.config.js configuration found in the root directory to include those directories to build from:
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
], // ... etc ...
There is nothing to be done in the postcss.config.js file for now. To be sure it works as expected simple create a temporary route and add the following to the blade in question:
<html><head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<h1 class="text-2xl text-red-400 text-center font-bold underline">Tailwind Css has Successfully been Setup</h1>
</body>
</html>
Back to your command line run this command: npm run dev and once complied you should see the H1 styled. You're good to go. You can go and add the other packages you need for your project and migrate your database and so on.
Bootstrap or Tailwind Css
Which is best and better? That's a pointless debate or argument. It's nonsense really because both are a) current and b) in use and c) maintained. It's in your own best interests from a career POV to have a working knowledge and experience on both these CSS frameworks. Neither over the medium term are going to fall out of favour with business end users nor the developer community.
