When you create an empty Laravel 12 project it comes installed and configured for Tailwind version 4.

Since Laravel version 11.3.0 Tailwind became the core part of Laravel skeleton. Laravel v11 comes with Tailwind v3 and Laravel v12 started shipping with Tailwind v4.

When you land on the Home page, you see a basic welcome page:

If we take a look at the Blade code, we see a lot of code but let's focus these two lines:

<h1 class="mb-1 font-medium">Let's get started</h1>
<p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">Laravel has an incredibly rich ecosystem. <br>We suggest starting with the following.</p>

Pay attention to CSS classes:

• class="mb-1"
• class="mb-2"

See that mb-X? That is a Tailwind class; "mb" stands for "Margin Bottom".

And yes, the bigger the number, the larger the margin.

For example, if we change the margin for the H1 tag <h1 class="mb-6 font-medium">Let's get started</h1>, the visual result will be this:

That is how you describe the classes for your HTML elements in Tailwind: combining many small classes defining the looks and positioning of a component or HTML element, to put it short.

At first, it may look confusing and even "ugly", especially if you come from a Bootstrap background. You may think: "What, I need to write 5-10 classes instead of just something like div class="card""? It feels almost like inline CSS.

But the main counterargument is what we did in the example above. We quickly changed the margin from mt-1 to mt-4. For that, we didn't need to create a separate CSS class like "input-with-bigger-margin" or add an extra inline style like <div class="input" style="...".

That's precisely the central philosophy of Tailwind: by combining small "utility" classes into how an element should look, you can quickly change that look. And when you get used to it, with more practice, you start thinking in those utility classes, remembering their names and behavior, and it starts feeling very natural.

Other Possible mb-X Numbers?

In almost every browser, 16px is the standard for proportional fonts. And there's a good reason: this size is easy to scale. So the base font size would be 1rem = 16px.

In TailwindCSS, those numbers are quarters of base rem size. Let's look at the mt-9 class. That would result in 9 quarters of 1rem: 1 / 4 * 9 = 2.25rem. The mt-9 class would apply the margin-top: 2.25rem style, which is 36px (16px * 2.25) if the base font size is 16px.

The same numbering logic applies to all class names, including, but not limited to, margins and paddings. It may look like you can put any number there, but that is untrue. For precise available classes, please look up the TailwindCSS documentation.

Troubleshooting

Wait, Why mb-8 Doesn't Work?

Ok, let's try to change the same Breeze example from mb-1 to mb-8:

<h1 class="mb-b font-medium">Let's get started</h1>

But if we refresh the page, it won't work. The margin would disappear at all.

Why?

Here, you need to understand how Tailwind classes are compiled.

When using TailwindCSS, your project's app.css file is compiled with the classes only in use.

First, install node dependencies defined in your package.json file using this command:

npm install

Then, compile new files using this command.

npm run dev

The dev part in the command will start Vite with a hot-reload feature, and changes will immediately affect when you add or remove TailwindCSS classes. This command is useful when developing your application in the local environment.

To compile static files, use build instead of dev.

npm run build

Compiling your CSS files has the advantage of smaller file sizes, and that affects your page loading time.

Compiled CSS file takes up 30.82 kB on disk. The server transfers it with compressions, which would take only 6 kB.

public/build/assets/app-9c5f9671.css  30.82 kB │ gzip:  6.00 kB

In comparison, Bootstrap takes up 232.95 kB on disk and 34.24 kB to transfer. That is more than seven times on disk, which is not the issue, but five times more data is transmitted via a network, which may seem trivial at first but could impact users with slower internet connections.

Optionally, you can include all TailwindCSS classes via CDN by adding this script into your <head> part of the page to play around without compiling CSS files, but it should not be used in production so that we won't discuss sizes on this one.

<script src="https://cdn.tailwindcss.com"></script>

I compiled a CSS file, but classes still won't apply. What should I do?

That often happens when you have Blade, Vue, or JS files in the location where TailwindCSS doesn't look for class names in use.

Check the resources/css/app.css in your application if there is source to you files destination.

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
 
@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

Double asterisk ** means to look into all subdirectories.

My file is in the path and has the correct extension, but some classes still won't apply; what now?

You're likely constructing your class names dynamically. That is especially very common if you're using frameworks like Vue or React on top.

Don't do that:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Instead, use full class names.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Tailwind v4 vs. v3

Let's briefly discuss the differences between Tailwind v4 and v3. Until v4, Tailwind had a config file in the project's root directory. There, you would add custom options like colors, spacing, etc.

Example config file:

tailwind.config.js:

import defaultTheme from 'tailwindcss/defaultTheme';
 
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

Starting with Tailwind v4, everything is configured in the CSS file. This is the main difference between Tailwind v4 and prior versions.

Example CSS file:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
 
@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

The second difference is that the tailwinds package was a PostCSS plugin, but in v4, the PostCSS plugin lives in a dedicated @tailwindcss/postcss package.

Besides these changes with a new major version, some deprecated utilities were removed, and some utilities were renamed.

To upgrade to v4 from v3, Tailwind has made a tool to automate the process. Of course, for more about the changes, you should check the upgrade guide.