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 CLILeaf MVC CLI

bash

leaf view:install --tailwind

bash

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:

html

<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:

bash

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:

bash

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:

bash

touch postcss.config.js

Add the following code to your postcss.config.js file:

javascript

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:

bash

touch app/views/css/app.css

Add the following code to your app/views/css/app.css file:

css

@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:

javascript

defineConfig({

The final step is to import your CSS file in your root layout file so that it gets included in your HTML.

blade

<!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 CLInpmpnpmyarn

bash

leaf view:dev

bash

npm i && npm run dev

bash

pnpm i && pnpm run dev

bash

yarn && yarn dev

Tailwind + Leaf ​

Using the CLI ​

Using Tailwind ​

Manual Installation ​

Tailwind + Leaf

Using the CLI

Using Tailwind

Manual Installation