How do you apply Tailwind CSS to all Blade Views in Laravel 9?

Question

I am new to Laravel. Please clearly explain what changes may need to be made since I do not understand any shorthand phrases or have any 'common knowledge' when it comes to this framework. Many thanks.

Issue: <h1> class="text-3xl font-bold underline">Hello world!</h1>"doesn't work when added to blank blade.php file.

Steps: 0. Followed official installation instructions.

Configured template path in tailwind.config.js: "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue",
Added Tailwind directives to app.css: @tailwind base; @tailwind components; @tailwind utilities;
Verified @vite(['resources/css/app.css', 'resources/js/app.js']) exists in app.blade.php

✅ Main Question:
How do you apply Tailwind CSS to all Blade Views in Laravel 9?

☑️ Concern 1:
Do I have to manually apply @vite('resources/css/app.css') into the head of every page in the future?

☑️ Concern 2:
Shouldn't it automatically apply to all blade.php files since steps 1 & 3 were completed correctly?

Update: All instructions from the official documentation were completed. It runs fine, but the tailwind styles still don't work without adding @vite('resources/css/app.css') directly to index.blade.php.

Thank you for helping me learn.

Yes. All instructions from the official documentation were completed. It runs fine, but the tailwind styles still don't work without adding @vite('resources/css/app.css') directly to index.blade.php. — NilWavers
– NilWavers, Commented Oct 15, 2022 at 15:51
There is no css files present in public. I just installed Laravel 9 project, installed tailwind, npm run dev, changed route to index, and tried the H1 tag. — NilWavers
– NilWavers, Commented Oct 15, 2022 at 16:15
This is actually a complicated answer as there are several steps you need to go through. Watch this and see if it helps: youtu.be/-3s-Yz14B0Q?si=bULlQRhlUdCMWBhW. This will work with Laravel 9 np. — timgavin
– timgavin, Commented Apr 16, 2024 at 12:56

Abish R · Accepted Answer · 2024-04-16 12:51:05Z

0

May be helpful...

You can apply css with @vite('resources/css/app.css') on resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
    @vite('resources/css/app.css')
</head>
<body>
    @yield('content')
</body>
</html>

Extend it on other blade files with @extends('layouts.app').

answered Apr 16, 2024 at 12:51

Abish R

611 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karan Darji · Accepted Answer · 2024-04-16 13:03:20Z

0

You have to include @vite('resources/css/app.css') into the head section of your main app layout file and further all your blade file should extend this main app layout.

answered Apr 16, 2024 at 13:03

Karan Darji

763 bronze badges

Comments

codeLover · Accepted Answer · 2022-10-15 16:05:15Z

-2

you should make folder layouts and into folder make main.blade.php
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body >
@yield('content')
</body>
</html>
------------------------------
and in other page for example index.blade.php

@extends('layouts.main')
@section('title', 'Index')
@section('content')

@endsection

answered Oct 15, 2022 at 16:05

codeLover

143 bronze badges

Collectives™ on Stack Overflow

How do you apply Tailwind CSS to all Blade Views in Laravel 9?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related