Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Play with TailwindCSS in the Browser

play.tailwindcss.com

Post reply on HN
Print view View original

191–200 of 300 posts

Re: Play with TailwindCSS in the Browser

#191

Post by yurishimo »

calvinmorrison wrote: post #167
likortera wrote: post #166

Earlier quoted context omitted.

> It's basically the point of cascading style sheets The "cascading" part is what makes it incredibly complicated. Keeping the "cascade" in sync with the actual markup is not a trivial task in teams with many people of different skills levels. Not everyone is a top 1% dev, so we need easier and safer tools so that everyone can work and maintain a codebase. > Sticking to proper class names and elements makes reskinnin…

You're just shifting work though. The commit will now contain 10000 non html structure changes to an html, phtml, whatever, instead styles to a CSS sheet. Might as well go back to doing inline styles. There's a reason we don't do that anymore.

This isn't the 90s. We all use file includes now. If you're working on a view file longer than a couple hundred lines, properly formatted, you're not abstracting enough or it's a one off marketing thing.

Re: Play with TailwindCSS in the Browser

#192

Post by pcthrowaway »

shroompasta wrote: post #179
65 wrote: post #80

I used to be a Tailwind hater. I couldn't fathom why anyone would ever use it. And then I used it. It seriously makes CSS significantly easier to maintain, dramatically reduces your CSS build size, and is really good for teams if you're trying to use consistent CSS throughout your UIs. You also don't need to go back and forth between CSS file and HTML file. If you're on the fence, try it out. I think it's the future…

Yeah, I've tried tailwindcss, but having many rules of css on one line isn't even at all legible, nor do I want to use horizontal scrolling.

This, and the tendency towards repetition, is my biggest issue with tailwind (and I still love it).

It tends to make the code pretty ugly.

There are ways to improve things somewhat (moving "bundles" of classNames into properties of a local or global cssClasses object and adding those to your elements' className), but you lose the intellisense when editing classes and it often ends up feeling like the extra friction isn't worth it. Having the styles right there seems to be a key part of what makes using tailwind so productive.

We have enough decisions to make regarding design as it is, adding organization, naming, selection, and attempting to maintain a sensible hierarchy into the mix leads to a fog of decision fatigue that I didn't realize existed until I tried Tailwind and it lifted.

Re: Play with TailwindCSS in the Browser

#193

Post by lloydatkinson »

abhayhegde wrote: post #124

As a self-taught web developer, Tailwind has been a breeze to use, especially since I can play with default properties that already fit in nicely. Gives so much customizability. However, I do find it laborious some times, since I have to define properties for each div every time, instead of just selecting things by CSS classes. Or I am doing this wrong.

You are in fact doing things very wrong. You’re supposed to be creating components or view partials or whatever you framework calls them and use those. The homepage literally has examples of doing this with multiple frameworks.

Re: Play with TailwindCSS in the Browser

#194

Post by pcthrowaway »

stefanfisk wrote: post #69
f3b5 wrote: post #50

Earlier quoted context omitted.

Tailwind is a thin wrapper for the people scared of CSS. I use Tailwind at work, and it opened my mind to the benefits of an "ugly" html layout with inline styling. However, being there now, I think that inline CSS offers the better "Tailwind experience" - CSS requires no setup, and learning it properly is a good investment for the future when Tailwind, like so many other frameworks, will inevitably end up on the fro…

how would you use media queries or pseudo selectors in inline CSS?

Pseudo elements as well

Re: Play with TailwindCSS in the Browser

#195

Post by toastal »

ramesh31 wrote: post #147
lolinder wrote: post #125

Earlier quoted context omitted.

Color management is easy in SCSS, too, though. I just have a _colors.scss file and enforce that no color is ever used that isn't in that file. If I'm working with a designer rather than designing my own UIs, that they have a default color palette isn't helpful, so what do I gain from Tailwind? EDIT: Reading some other comments, I wonder if part of the reason I don't see the utility is that I use Vue, not React. It so…

The killer for SASS nowadays is CI. You're either using the (ancient, slow) Ruby implementation of SASS, or node-sass which requires a native binary build and causes headaches across environments. Furthermore, with Post-CSS, the feature set of SASS has been completely subsumed by the latest CSS standard. There's really no good reason to use it anymore.

It's Sass, not SASS.

The native libsass is much faster. The headaches come from people trying to distribute binaries and libraries through NPM.

Re: Play with TailwindCSS in the Browser

#196

Post by pcthrowaway »

erokar wrote: post #105
halotrope wrote: post #71

There is only two kinds of people. The ones that don't like Tailwind and the ones that have used it. I know it is conceptually "wrong" and a bunch of well crafted CSS classes would be more elegant. In the end it works, works really well and makes collaboration dead simple. Commonly used groups of classes can either be aliased by @apply or used in a (react) component. I used CSS way before Tailwind was a thing and in…

I've used Tailwind on many projects at work for about a year now. I do not like it. Tailwind seemingly affords an easy way of writing inline styles, but it 1) clutters the HTML, 2) leads to repetition and makes people break the DRY principle (yes, you should extract to components, but people don't always do that), 3) uses names that can be similar but are not identical to CSS properties and feels like a bad abstracti…

I actually love Svelte, but generally feel much more productive in React, in part, because Tailwind seems to work better with it.

Re: Play with TailwindCSS in the Browser

#197

Post by [deleted] »

f3b5 wrote: post #89
stefanfisk wrote: post #69

Earlier quoted context omitted.

how would you use media queries or pseudo selectors in inline CSS?

Good point, I don't know of any way of doing that inline. So that's definitely a good convenience function in Tailwind! My lived approach to inline vs. not-inline is: why not both? Inline is great for prototyping, and for edge cases, like specific margins for wrapper divs. Where CSS classes really shine is when it comes to mature / often used components.

[deleted]

Re: Play with TailwindCSS in the Browser

#198

Post by no_wizard »

ramesh31 wrote: post #147
lolinder wrote: post #125

Earlier quoted context omitted.

Color management is easy in SCSS, too, though. I just have a _colors.scss file and enforce that no color is ever used that isn't in that file. If I'm working with a designer rather than designing my own UIs, that they have a default color palette isn't helpful, so what do I gain from Tailwind? EDIT: Reading some other comments, I wonder if part of the reason I don't see the utility is that I use Vue, not React. It so…

The killer for SASS nowadays is CI. You're either using the (ancient, slow) Ruby implementation of SASS, or node-sass which requires a native binary build and causes headaches across environments. Furthermore, with Post-CSS, the feature set of SASS has been completely subsumed by the latest CSS standard. There's really no good reason to use it anymore.

You should really be using the dart-sass[0] build (just `sass` on npm). None of the headaches of native binaries or using ruby, its pure JavaScript (its a dart codebase transpiled to JS). It is very fast.

[0]: https://sass-lang.com/documentation/#older-versions

Re: Play with TailwindCSS in the Browser

#199

Post by jozzy-james »

anon1378 wrote: post #62

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states: How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to av…

without even touching the pseudo selectors, your example is roughly this with vanilla css (didn't check the exact values from the TW config, just for illustration purposes)

  input {
    margin-top: 1rem;
    width: 100%;
    padding: 2rem 3rem;
    background-color: white;
    border: 1px solid slate;
    border-radius: 25%;
    font-size: 1rem;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
                rgba(0, 0, 0, 0.05) 0px 4px 6px -2px

  }
now, most of that is pretty straight forward - but you're just going to end up with a whole lot of copypasta when you need to implement outline/focus/shadow/etc state on many elements. and maybe on some specific instances of them you don't want that, so then you have to create a class just to override your global defaults

Re: Play with TailwindCSS in the Browser

#200

Post by teen »

aidos wrote: post #190
fc373745 wrote: post #178

Earlier quoted context omitted.

I completely disagree. To fix the css + jsx in one file, just write your styled components at the bottom of your component. If you ever seen a react component completely riddled with Tailwind, you'll realize how messy and uncoordinated it looks. Even I would consider switching between two files just to avoid that style of css. Furthermore the necessity to utilize horizontal scroll because adding 10+ more rules will i…

You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want. The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.

Each styled-component also increases your css payload size linearly
Post reply on HN