While working on a personal project I was working on a blade template and file and wanted to add CSS to it. Instead of the using standard CSS or SASS I decided to go with the more modern solution of Tailwind CSS.
How to integrate to a Laravel project
Install the required tailwind and associated modules.
npm install -D tailwindcss postcss autoprefixer
Add the tailwind and postcss config files.
npx tailwindcss init -p
Open the tailwing.config.js file located in the main folder of your Laravel project.
Update the content array with a list of file types you want to use with Tailwind CSS.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php"
],
theme: {
extend: {},
},
plugins: [],
}
Go to the main app.css file located at resources/css directory of your Laravel project.
Add the following lines to the top of the file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Inside of the terminal go to the main directory of the Laravel project and run the vite development server.
This will automatically build the CSS for the views as you work on them.
npm run dev
Go to the main layout file where the HTML, Head and Body tags are set and include a reference to the app.css so Tailwind CSS can be applied to your view files.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@vite('resources/css/app.css')
</head>
<body>
<h1 class="text-3xl font-bold underline">Heading 1</h1>
</body>
</html>
You will notice as you add Tailwind CSS the npm run dev command will build the views you edit.
When you view the page that uses Tailwind CSS, if you see the CSS is applied then the integration was successful.
How to use
The main Tailwind CSS website has a documentation section that shows you the various classes that you can use with examples.
