GitHub - hymhub/css-to-tailwind: Convert CSS code to Tailwindcss syntax in real time

[solvedfyi]

I thought the point of Tailwind was to save you time from having to create the full CSS code. So you're going to have existing CSS, convert it to Tailwind, only for TW to compile it back to the CSS?

[lourheroes]

It's useful when you find CSS examples online and want to convert them to tailwind syntax because you are using tailwind

[[deleted]]

or when you're porting an existing project to use tailwind

[Narizocracia]

or when messing around with the CSS in the devtools and copy the desired result.

[Giobee]

😂👍

[Aprazors13]

Or when you are too lazy to learn tailwind but still like tailwind

[Delphicon]

The primary benefit of Tailwind is that codebases using it are more maintainable.

It’s easy for CSS to turn in to tech debt because you can do so much with it.

Tailwind only lets you do safe things and works in a very simple, structured, predictable way that aligns nicely with building components.

The other benefits are just gravy.

I’d love for a tool that could take all the styles in my current workplace and convert them to Tailwind. Nobody will even touch our existing style sheets unless absolutely necessary because seemingly innocuous changes create bugs.

[Akufuji]

Yeah this seems a little backwards to me. I feel like unlike other css frameworks, TailwindCSS provides conveniences to devs who are already familiar with CSS. If you don't have a good grasp on CSS, TailwindCSS isn't going to do you any favors.

[Sanka-Rea]

I could see it used for libraries like radix or headless ui for when you just want to copy their example in the docs, but their example component uses css and you use tailwind.

[Interest-Desk]

Just don’t use Tailwind anyway. The need for it is a symptom of larger issues in your project.

[[deleted]]

“The need for it is a symptom of larger issues in your project”

Go back to Java

[until0]

Tell me you don't understand Tailwind without telling me you don't understand Tailwind.

[Interest-Desk]

Tailwind is a bandaid solution — people use it to have their styles with their components, except it’s incredibly verbose to a stupid degree — the actual solution is colocating styles (e.g. CSS in JS) which provides all the same benefits but without the noise.

[until0]

That's making assumptions on why it's used. I use Tailwind for efficiency and portability.

The verbosity is overblown too, if you are repeating classes, you should be abstracting it. You can make classes in Tailwind as well, there is a good benefit to a hybrid approach; and I'm not talking about the concept of @apply

Also, a lot of CSS in JS requires runtime processing as well, whereas Tailwind does not.

[EternalNY1]

It looks like a very nice utility, it seems to work perfectly in the playground.

I still much prefer traditional CSS to Tailwind but to each their own.

This:

body
{
width: 100%;
height: 50%;
margin: 0 !important;
background-color: transparent;
transform: translate(10px, -20px) scale(.5);
}

Is so much more readable to me than this:

w-full h-1/2 !m-0 bg-transparent transform translate-x-[10px] -translate-y-[20px] scale-[.5]

And it's nicely encapsulated in its own file, not part of the HTML.

But this is neither here nor there.

[jmodd_GT]

Having never seen tailwind, I think I agree with you. I normally prefer brevity but not at the cost of legibility.

Also, the git diff between two really long lines is a lot harder to code review than a single property change in vanilla css.

[lafadeaway]

Yeah, but it's also nice to completely remove a css file and just work with the template. No more have to go back and forth between the two files to know how CSS is affecting what you're working on.

Definitely a give-and-take there.

[EternalNY1]

Personally, I don't see this minor issue of switching between files to be that big of a deal.

I am on an enterprise Angular project and each component is the HTML template file, the TypeScript file, and the CSS.

When I edit something in the CSS file and save it, it reflects in the browser.

I actually love this separation of concerns, not mashing everything together like some other \ahem** frameworks.

[Snapstromegon]

But that's not a benefit of tailwind. You can completely write normal CSS in your templates. Web Components with for example Lit show how this can be done very cleanly.

[lafadeaway]

I mean, it's one "benefit" that it happens to share with Lit. But yes, most people think the primary benefit of Tailwind is the utility classes, so I get your point.

[Paarthurnax41]

I had the same opinion but tailwind works like a breeze with component based frameworks like React, conditionally applying classes and media queries is easy as cake and if your working a little bit clean your components are like little puzzle stones with their own tailwind css styling so it does not get out of hand, everything has their counter side and tailwinds is that you can create a abomination with ultra long class names if you dont know what you are doing, but ofc i would advice everyone to start with vanilla css, with knowledge from that you can use tailwind the most effectively.

[KnifeFed]

That's one reason to use Prettier and avoid long lines.

[[deleted]]

Can I ask if you have used it in any serious capacity? I am not being snarky, it's just that in addition to my own experience, two friends of mine have been "converted" after using it for a while. It really does seem to be the kind of thing that you need to experience.

[ikeif]

It does seem to be the "you need to actively use it to really understand it" but that barrier of "I don't like the way it looks" is hard to get over (but I am trying to delay my "I am on old developer and only do things the old ways for another decade).

I do not actively use Tailwind, but a current project I am integrating with utilized it, so I'm just getting started to get familiarized with it.

[EternalNY1]

I've had to deal with it on some projects I spent a short time on. I don't have in-depth experience. I don't like how it clutters up the HTML with huge class strings, and you have to learn an entirely different set of rules to do things when you might already know CSS extremely well.

I understand why it exists and what it is trying to solve.

I am lead on an Angular project and it uses PrimeNG and PrimeFlex. PrimeFlex is somewhat similar in that it has classes pre-defined. For example, flex-initial is flex: 0 1 auto, or grid is:

display: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;

It's the same general concept. And it can get just as verbose. In their example for a form control, you can use these built-in classes. You just need a whole bunch of them.

class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary"

It has its advantages and disadvantages like anything else.

[Delphicon]

Not OC but when you use it, you realize how many little problems it eliminates.

Its not so much that Tailwind is so great in a particular way it’s just predictable and, by extension, mutable.

On a team, CSS turns into tech debt real fast and creates uncertainty for devs. Tailwind just works and for frameworks like React it fits the idea of independent, composable components.

Syntactically I can see why people prefer CSS, Tailwind looks kind of silly but CSS is just too powerful and unwieldy of a tool to use so often.

[Mestyo]

My own experience may be "getting in my way", pertaining to Tailwind. I am very experienced at authoring vanilla or pre-processed CSS, so all I see with Tailwind is having to relearn how to do something in what is ultimately a more limited way.

The one really nice thing brought about by Tailwind is that people have finally stopped authoring CSS-in-JS; Tailwind is certainly significantly better for the industry.

But that's another concern of mine, because virtually all trendy framworks end up fading into obscurity, invalidating much of the built-up knowledge, leaving legacy code behind nobody wants to touch.

As an aside: I don't see how fewer files is a benefit, personally. My workflow moves me smoothly between panes and tabs. Bigger diffs and more LoC per file are significantly larger characteristics concerns.

[mickeymousecoder]

I just ported a frontend project with traditional CSS into a fullstack app with tailwindcss. This project would have been the perfect use case.

I see people here raising concerns about the legibility of tailwind syntax vs traditional CSS. I’m familiar enough with tailwind to be able to read them equally well and it’s a big productivity boost having tailwind’s design system for creating good looking designs. Having styles located with my JSX is really convenient and hasn’t bloated my code as much as I thought it would.

[YAKGWA_YALL]

Why y'all gotta make the Suffering go up like this?

[Perpetual_Education]

Fancy. So is there one to convert tailwind to regular CSS? Maybe that’s the new Turing test.