Tailwind + Leaf
Tailwind is a utility-first CSS framework that provides a set of utility classes to help you build your UI. Leaf has first-class support for Tailwind CSS, and it's the recommended way to style your Inertia apps. This guide will show you how to set up Tailwind CSS in your Leaf project with minimal configuration.
Using the CLI
You can set up Tailwind CSS in your Leaf project using the Leaf CLI. To do this, run the following command:
leaf view:install --tailwind
php leaf view:install --tailwind
This command will install Tailwind CSS and its dependencies, create a Tailwind configuration file, and set up your CSS file to import Tailwind CSS. It will also add your CSS file to Vite as an entry point.
Using Tailwind
Once setup, Leaf will include all the Tailwind imports which means you can jump into your UI and start writing your components with Tailwind. It also includes the tailwind config in the root of your application. This allows you to define all the configuration for your project if it does not match what Leaf has generated for you.
You can then go ahead to test out that your Tailwind install works fine:
<body>
<h1 class="text-4xl text-blue-600">Welcome to Tailwind</h1>
<p class="text-center">Leaf is amazing!</p>
</body>
Manual Installation
Leaf MVC comes with Vite out of the box, which is a modern build tool that supports Tailwind CSS out of the box. To get started, you need to install Tailwind CSS and its dependencies:
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Next, you need to create a Tailwind configuration file. You can do this by running the following command:
npx tailwindcss init
This will create a tailwind.config.js
file in the root of your project. You can customize this file to suit your needs.
Next, you need to create a PostCSS configuration file. You can do this by running the following command:
touch postcss.config.js
Add the following code to your postcss.config.js
file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Next, you need to create a CSS file that imports Tailwind CSS. You can do this by running the following command:
touch app/views/css/app.css
Add the following code to your app/views/css/app.css
file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Next, you need to add your CSS file to vite as an entry point. You can do this by adding the following code to your vite.config.js
file:
defineConfig({
The final step is to import your CSS file in your root layout file so that it gets included in your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaf</title>
{{ vite('css/app.css') }}
...
That's it! You now have Tailwind CSS set up in your Leaf project. You can start using Tailwind utility classes in your views to style your UI.
Be sure to start your vite server by running:
leaf view:dev
npm i && npm run dev
pnpm i && pnpm run dev
yarn && yarn dev