Theo's Typesafe Cult•2y ago

Some Tailwind classes have no affect

I have a very weird occurrence where some elements have Tailwind classes apply css properties to them, and some don't. As you can see in the image provided, I have flex and margin classes, but they do not apply. It is true for all view sizes. On the contrary, an element above with width and padding classes, does actually have styles applied to it.

38 Replies

Ramazan•2y ago

Do you have a theme in your tailwind config? If so, does it extend or override the screens property?

AvivOP•2y ago

I had a theme config, but it did not touch the screens property. I now deleted everything to the very minimum and still doesn't work:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    'node_modules/preline/dist/*.js',
  ],
  darkMode: 'class',
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('preline/plugin'),
  ],
};

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    'node_modules/preline/dist/*.js',
  ],
  darkMode: 'class',
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('preline/plugin'),
  ],
};

Unknown User•2y ago

Message Not Public

AvivOP•2y ago

yes it is version 3 😪

awexis•2y ago

Try adding "!" In front one of them. Could be something else is overriding it

AvivOP•2y ago

Like this?

      <div className="!no-wrap md:!mx-2 md:!flex md:!flex-col xl:!flex-row">

        <div className="!w-full md:!m-auto md:!w-6/12 xl:!m-0 xl:!w-3/12">

      <div className="!no-wrap md:!mx-2 md:!flex md:!flex-col xl:!flex-row">

        <div className="!w-full md:!m-auto md:!w-6/12 xl:!m-0 xl:!w-3/12">

didn't help 😦

Unknown User•2y ago

Message Not Public

AvivOP•2y ago

yes I have this in my globals.css actually you can see in the pic that the class name are being sent. also i am not using conditional class in that file ---------------------------------------------------------------- It's very odd but some stuff lke "w-full" and "flex" work, while others like "mx-2" or "md:flex" do not work --------------------------------------------------------- I've tested this on codesandbox and it works, so it has to be a problem with my app and not with my file

barry•2y ago

make a gist send the tailwind config in it and take a screenshot of your general folder layout and say what file doesnt work

AvivOP•2y ago

So like a sandbox with the gist, and include the images theowat

RESTART TO PC SOLVED THE PROBLEM. theowat

ITS WEIRD SINCE EVEN IN OTHER BROWSERS I HAD SAME PROBLEM, SO IT WASN'T A CACHE ISSUE. I appriciate everything who commented! -------------------------------------------------------- The problem came back. now again one element have shit working for him, and the other don't. 2 elemenets in the same file

Vincent Udén•2y ago

Just because the classes are included in the html that doesn't always mean that tailwind manages to parse how you generate the classes fyi. But if it's just straight up class names with no conditional logic that is very weird

AvivOP•2y ago

yea, in this className for example: "w-full md:m-auto md:w-6/12 xl:m-0 xl:w-3/12" only the w-full applies. You might think that its a screen problem, but the site is on 1870px and 100% using breakpoints does work for another element in the same file, so it shouldnt be it

Vincent Udén•2y ago

Have you tried manually running the tailwindcss cli just to see what it outputs? Just to eliminate some possibilties

AvivOP•2y ago

you think this is what i should do?

Vincent Udén•2y ago

Well yeah, except the --watch. Just to see if tailwind manages to detect your classes when ran this way

AvivOP•2y ago

it doesnt work since i don't have the files it specify

Vincent Udén•2y ago

What? You have a tailwind config and a css file where the directives are. (probably called globals.css if you're on t3) That should be enough

AvivOP•2y ago

i've tried, and unless I did something wrong, all I see is just a never-ending output of styles

AvivOP•2y ago

Vincent Udén•2y ago

Yeah that is the exact point. Can you find any of your classes in there? Can you find the problematic ones?

AvivOP•2y ago

for some reason i cannot find these

Vincent Udén•2y ago

Ah, well then you can be 100% sure it's a problem with Tailwind and nothing to do with delivering the css to the browser or anything like that

AvivOP•2y ago

should i like change versions, reinstall stuff, etc?

Vincent Udén•2y ago

I'm kinda stumped actually. It's very strange. Doing a clean install of all dependencies can't hurt though

AvivOP•2y ago

reinstalled all node modules and changed to latest version but didnt help. The weird thing is that everything worked today up until a moment when out of the blue it stopped

Vincent Udén•2y ago

Have you got a github repo for the project? I'd be willing to try it on my machine and see if I can find anything I just noticed something What's your folder structure like?

AvivOP•2y ago

AvivOP•2y ago

the src here has no meaning i don't use it, will be deleted in styles folder i got globals.css

Vincent Udén•2y ago

holy fuck, that was more than I expected lol All looks to be in order for what I can see though now Have you tried disabling the tailwind plugins just to see if they're screwing anything up?

AvivOP•2y ago

didn't help \:

Vincent Udén•2y ago

Then I am all out of ideas sadly. I'd probably try jumping back in git history until the styles are working again and see what's changed

AvivOP•2y ago

i've never done that actually (I mean on jobs I had PRs), you say theres a way to fallback to older versions and then return to the newest one on will?

Vincent Udén•2y ago

Yes That is like half the point of git Just to make sure you dont mess anything up, I'd get a copy of the repo to mess around in

Vincent Udén•2y ago

Then, some instructions her on how to look at an older commit https://stackoverflow.com/questions/4114095/how-do-i-revert-a-git-repository-to-a-previous-commit

Stack Overflow

How do I revert a Git repository to a previous commit?

How do I revert from my current state to a snapshot made on a certain commit? If I do git log, then I get the following output: $ git log commit a867b4af366350be2e7c21b8de9cc6504678a61b` Author: ...

Vincent Udén•2y ago

Just make sure you don't push anything when fooling around like this

AvivOP•2y ago

are you sure its possible even if i never had any branch other than main? I commit straight to main

Vincent Udén•2y ago

Yes of course git log will show you the history of commits

AvivOP•2y ago

Ok thanks to your advice, I saw that the problem appeared when I extracted some inline-code into a reusable component. When I render it inline it works, but not with that component. So I started playing with things, and now it seems to work again, even without any changes (aka i'm still using a component and not an inline code). Then, when I kept coding some unrelated stuff, the problem appeared again. So i changed the code again to inline, and back to component, and it works again. I have no idea what is going on, but it sometimes breaks by itself, and i need to revert and un-revert the code to make it work again

Gaming

Programming

Some Tailwind classes have no affect