Sage 10 tailwind css is not working without small addition to tailwind.config.js

[distributev]

Version

10

What did you expect to happen?

Tailwind CSS, being the default CSS framework in Sage 10, should be correctly configured

Without adding the below change to the tailwind.config.js I could not get TailwindCSS working properly. Once I added the small change TailwindCSS started to work fine.

/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}', './resources/views/**/*.blade.php'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
    },
  },
  plugins: [],
};

export default config;

_'./resources/views//*.blade.php'_** is the thing I had to add

What actually happens?

The content array in your Tailwind CSS configuration specifies the files where Tailwind should look for class names to include in the generated CSS.

In your current configuration, Tailwind is looking in:

The index.php file at the root of your project All .php files in the app directory and its subdirectories All .php, .vue, and .js files in the resources directory and its subdirectories If you're using Tailwind CSS classes in your Blade files, you should include './resources/views/*/.blade.php' in the content array. This will tell Tailwind to look for class names in all .blade.php files in the resources/views directory and its subdirectories.

After updating your configuration, make sure to rebuild your CSS. If you're using Laravel Mix, you can do this by running npm run dev or npm run watch in your terminal.

Steps to reproduce

---

System info

Latest Sage 10.

Log output

No response

Please confirm this isn't a support request.

Yes

[Log1x]

Can you double check that you are experiencing this behavior with the default configuration?

./resources/**/*.{php,vue,js} should already handle the blade files since they end with .php.

[dsturm]

Dear @distributev ,

the current config uses ./resources/**/*.{php,vue,js}, which will look for *.php files - besides .vue and .js. But since a blade file is named *.blade.php, the pattern will match these files also.

It works fine and I assume there must be something else, which caused a failure on your side.

You also mention Laravel Mix - the current build process uses bud instead. Do you really use the current state of Sage 10?

[distributev]

I'm trying to convert https://tailnext.vercel.app/ from Next to Sage10 / Blade.

The 1st div there Announcement class="hidden overflow-hidden text-ellipsis whitespace-nowrap border-b border-blue-900 bg-blue-900 px-3 py-2 text-sm text-gray-200 md:block" is visible in Tailnext but exactly the same in Sage 10 is not visible.

Try it yourself with the Annoucement component being implemented in resources/views/components/announcement.blade.php

I wasted a lot of time trying to debug this and seeing that the HTML/CSS in both Tailnext and Sage 10 was almost identical.

Because of the hidden class it might look that it is the expected behavior not to view the div's content but the last md:block override's the "hidden" behavior thus the content should be visible (you can check and it is visible in Tailnext)

I have tried with Announcement component being implemented both as a ReactJS component (like in Tailnext) or as a blade component and it was not working in any approach.

Once I added the missing './resources/views/*.blade.php' it started to work (Announcement is implemented as a blade component now).

[dsturm]

@distributev, I set up a repo of Sage with your mentioned Announcement component, ran a devand also a buildtask and still cannot reproduce your issue.

The component is hidden below the md breakpoint:

... and shown above:

For me it looks, like your code misses some others steps. Can you give us a repo, where we can try to locate the issue? Otherwise, please look at the given repo.

[distributev]

You are right now it is working for me too - it was probably a caching issue, I lost a lot of time.