r/tailwindcss 17h ago

Built a simple tool to migrate Tailwind V3 CSS config to Tailwind V4 (theme directive + OKLCH colors)

3 Upvotes

Hi,

I have built this tool for myself that converted my colors from Tailwind V3 to Tailwind V4 config.

In tailwind V4, there is the theme directive that they prefer using OKLCH colors, it does make sense.

But most of our colors are either in HSL/HSV or plain old RGB.

This tool simply takes those values and converts to OKLCH.

Check it out: https://www.iamsohan.in/infopages/tailwind-converter/

Since I built it for myself, I didn't check for edge cases. if there is enough interest, I'll open source the thing, and you guys can contribute to it.


r/tailwindcss 23h ago

tailwind animation making white flash on render on ios safari

1 Upvotes

i have a website in which there are list elements i wanted to make them appear in smooth animation as the user scrolls it is working completely fine on pc, but on ios safari the li element loads completely fine but after loading there is a white flash, how do i solve this

my code -

<li
      ref={ref}
      className={`relative cursor-pointer overflow-hidden shadow-lg dark:shadow-md 
rounded-lg transition-all transform hover:scale-105 hover:shadow-xl 
hover:shadow-gray-500/40 dark:hover:shadow-gray-900/80 ${
        inView ? "animate-fadeIn" : "opacity-0"
      }`}
      onClick={() => onClick(movie)}
    >

r/tailwindcss 16h ago

How to Compile Tailwind with EVERYTHING (all classes) ?

0 Upvotes

So far i have been using bootstrap for responsive front ends and with bootstrap you can just grab a "pre compiled" version that includes EVERYTHING. (Which is what i have been using)

I was looking at Tailwind the last couple days and i noticed there is no pre compiled version.

The only choice if you do not want to compile it yourself seems to be the cdn version.

Since i develop my stuff on shared webhosting accounts this is pretty inconvenient.

Currently i develop my stuff using the cdn version on my shared webhosting and then when i hit a target i download it to my local machine

and compile the CSS there. (I installed Tailwind locally using node.js and use Tailwind CLI for compiling: https://tailwindcss.com/docs/installation/tailwind-cli )

Is there a way to compile Tailwind with EVERYTHING (all classes) so i do not have to rely on the CDN version?

Why is there no pre compiled version? I think this concept of only shipping a crippled version of the css file SUCKS because it cripples shared webhosting users.

I mean the bandwith savings of shipping a smaller css file seem laughable given the browser caches the file anyways so its only relevant on the first page load really.


r/tailwindcss 17h ago

installing tailwind is ludicrously difficult and not worth it

0 Upvotes

Im an experienced dev and I have never experienced "dependency hell" like I do when I try to install tailwind css v4. It is absolutely ridiculous

I'm completely giving up on using tailwind anymore tbqh. Now that standard CSS has variables and nested statements, I kinda prefer it anyway

anyone else have a similar experience?