Question 8210 in PHP Versions Question posted in
You can find a list of all versions here.

TailwindCSS styles not applying correctly unless I use the Tailwind CDN file (Laravel 9.x/Tailwind 3.x) – PHP Versions

I have installed a fresh version of Laravel 9.x (9.2 to be exact) with the Laravel Breeze starter kit for authentication. By default Laravel Breeze comes with Tailwind 3.x installed which is compiled in the following line inside the <head> HTML tags.

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Part of my view for some reason only renders correctly when I manually add the Tailwind CSS CDN file to the head like this in the app.blade.php file (obviously I’d prefer to NOT use the CDN file as Tailwind 3.x is already compiled within the app.css stylesheet).

<head>
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  <!-- Really need to remove this line below -->
  <script src="https://cdn.tailwindcss.com/3.0.23"></script>
</head>

— How it looks WITH the CDN link added to the head tag (this is how it should look like but without using the CDN) —
enter image description here
— How it looks WITHOUT the CDN link added to the head tag —
enter image description here

Here is the code within my blade file (i’ve removed the Laravel PHP logic for simplicity and readability).

<tr style="display: none;" x-show="selected == {{ $loop->iteration }}">
    <td class="text-center text-xs" colspan="5">
        <div class="flex flex-row">
            <div class="basis-2/12">
                <div>
                    player123 | 9.3
                </div>
            </div>

            <div class="basis-8/12">
                <div class="grid grid-cols-3 gap-4 w-100 md:w-1/2 mx-auto border-b py-2">
                    <div class="text-center text-xs md:text-sm">10</div>
                    <div class="text-center text-xs md:text-sm">Shots on Target</div>
                    <div class="text-center text-xs md:text-sm">10</div>
                </div>                                                                                
            </div>

            <div class="basis-2/12">
                <div>
                    player721 | 9.3
                </div>
            </div>
          </div>
    </td>
</tr>

— Expected behaviour —

Have then stats ‘row’ displayed so it uses the full width of the table but without using the <script src="https://cdn.tailwindcss.com/3.0.23"></script> tag (as illustrated in first image above).

— Actual behaviour —

The stats ‘row’ has seemingly ‘floated’ to the left hand side of element – can anyone explain why the flex-row doesn’t use the full width of the <td> container within the table?

p.s I am running npm run watch to auto build my app.css and I can see Tailwind 3.x stuff in the app.css file when I view source.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Cannot believe this - I had not run npm run watch that recreates the app.css - obviously tired.com


  2. 0

    In app.css, try replacing:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    with:

    @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

    and run npm run dev or npm run watch again.

    Login or Signup to reply.
  3. 0

    Where is your Blade file located? Laravel Breeze’s default tailwind.config.js only looks in the following paths for discovery of the classes it needs to generate.

    content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],
    Login or Signup to reply.
  4. 0

    i solve this problem by adding the path for my vue components which i placed in resource for example: resource/js/components/companies/CompanyIndex.vue
    adding this './resources/js/**/*.vue' to content list in tailwind.config.js will solve the problem
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search