Some Tailwind classes were missing / were purged despite being in the JSX / HTML

[k1sul1]

Have you experienced this bug with the latest version of the template?

No, but the only changes to it are irrelevant (project created last week)

Steps to Reproduce

Present from the get-go.

Expected Behavior

I expected Tailwind UI to work out of the box.

I pasted this page heading on the notes route, and expected it to look like this.

Actual Behavior

A button was missing entirely, the image wasn't rounded, and other stuff. The classes that were present in the HTML didn't get included into the CSS bundle.

I'm not sure, but I think that the problem might be related to a missing input file. I changed the command from tailwindcss -o ./app/styles/tailwind.css to tailwindcss -i ./app/input.css -o ./app/styles/tailwind.css, and created the input.css file:

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

and what do you know, it now looks like it should:

[MichaelDeBoey]

@k1sul1 Problem is not related to missing input file, as Tailwind has a default input file with the following content

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

Tailwind is also properly installed, so I guess there should be some other problem on your end.

[k1sul1]

Thanks for disproving my hypothesis / guess. Could've been a classical case of needing to run "npm install" again.

It was very weird, because SOME things from Tailwind worked, like the default frontpage looked like it should've, as did the login form. Only the thing that I added didn't work.

Nevertheless, I think it would make sense to include the input file manually, because let's be real, you're going to want to write at least some CSS despite using Tailwind. I went in an edited app/styles/tailwind.css directly before realising I was in the wrong file.

[MichaelDeBoey]

let's be real, you're going to want to write at least some CSS despite using Tailwind

Tbh, I never write custom CSS anymore.
And now that Tailwind supports arbitrary values, it's even less needed to write custom classes.

Tailwind also is encouraging the use of components instead of classes, so I think we're fine with not having the file by default.

[k1sul1]

I bet that's nice. However, in this particular case, it makes more sense to implement a .card as a class, rather than a component. That's just one example. The one from Tailwind docs is another. btn-primary isn't always going to be used in an actual button, it can alse be a link.

I don't think it's smart to make a component that does two things -> two components -> when our btn-primary changes, it has to be changed in two places if we don't use @apply for it. So we're going to use @apply for it 😸

I guess anyone who was able to get the stack running in the first place can also figure out how to add a CSS file so I'll accept "my defeat".

Closing.

[ijohn]

@k1sul1 Problem is not related to missing input file, as Tailwind has a default input file with the following content

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

Tailwind is also properly installed, so I guess there should be some other problem on your end.

I can confirm that @MichaelDeBoey was right. I have just finished doing a page with Tailwind UI and everything works without configuration changes.

I hope your issue is resolved @k1sul1. If it's not, please make sure you have installed the dependencies stated here: https://tailwindui.com/documentation#react-installing-dependencies 🤞

[k1sul1]

Yeah, that was my first thought, not installing Tailwind UI properly, but that wasn't the case. The component that I added doesn't require those dependencies. I've gotten pretty far in the project without having any issues after the initial one.

[trungthecelestial]

In my case current tailwind setup inside blues stack cannot translate the responsive class at all.

[machour]

@trungthecelestial please open a new issue if you're having a problem, and provide more details and a reproduce case.
Commenting on an 6 months old & closed issue won't help us help you!