Tailwind: style your site without writing any CSS • Hacker News Board

Re: Tailwind: style your site without writing any CSS

#51

Post by notjustanymike » Fri, Nov 02, 2018, 2:52 PM UTC

wolco wrote: post #17

I have trouble with the following statement. Complete flexibility is a bad thing? If I accept that how is limiting options to 30 not providing too much flexibility? "Limits & standards. With normal CSS, I can make any element any width I want. For me, this is not a good thing! With tailwind, there are only 30ish options for width"

Actually it is, especially when you're working with a team of developers.

Imagine that your designer puts together a design system built on a soft grid. The rules in the design system are what ensure consistency across the site.

If you have a team of developers, sooner or later you'll manage a junior dev who interprets the design as a pixel perfect layout, and starts defining widths on elements per their own personal interpretation. Maybe they eyeball it, maybe they measure it, maybe they measure it but don't include the border.

You can catch such things through training and code review, but it puts the burden of managing design consistency on a senior engineer. Starting out with a constrained system is one easy way to ensure consistency of design across large projects.

Re: Tailwind: style your site without writing any CSS

#52

Post by ssijak » Fri, Nov 02, 2018, 2:53 PM UTC

Raphmedia wrote: post #40

mbrock wrote: post #33

Earlier quoted context omitted.

Oh no, laziness! Someone is doing something in an easy and convenient way that somehow doesn't match up with other people's ideals of conceptual purity! :'(

Bloating your markup with classes is simply a bad habit. It bites you hard in the long run. Even the framework that they are using proposes better alternatives. “ Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction. While we strongly believe you can get a lot further with just utilities than you might initially expect, w…

Key word is “dogmatic”.

Re: Tailwind: style your site without writing any CSS

#53

Post by [deleted] » Fri, Nov 02, 2018, 2:53 PM UTC

dpau wrote: post #50

Here's a single-page cheatsheet I created for Tailwind, good for seeing Tailwind's utility classes at a glance: https://derekphilipau.github.io/tailwindcss-cheatsheet-singl...

[deleted]

Re: Tailwind: style your site without writing any CSS

#54

Post by majewsky » Fri, Nov 02, 2018, 2:54 PM UTC

ghostly_s wrote: post #34

Isofarro wrote: post #30

Earlier quoted context omitted.

In what context is this "an awful amount of characters" an issue? GZip compression is fairly standard these days, and languages based on plain english (or similar languages) has a better level of compression than random text because of repetitive nature of sequences of characters. I can't believe that mnemonic based languages are easier and more readable than something closer to a natural language. And with the assum…

It's a decision to optimize write-ability, not readability. Not sure why this is so puzzling.

It's puzzling because the same people then shit on Perl for being "write-only".

Re: Tailwind: style your site without writing any CSS

#55

Post by nickthemagicman » Fri, Nov 02, 2018, 2:55 PM UTC

If you use Sass you get both the benefits of semantic html AND the ability to jam a million classes into an html element with @include and @extend.

Re: Tailwind: style your site without writing any CSS

#56

Post by nickthemagicman » Fri, Nov 02, 2018, 2:56 PM UTC

Raphmedia wrote: post #31

Sounds to me like the author should simply use SASS + a good autocomplete feature in their IDE. When I write CSS, I use a lot of shortcuts. I simply write "mt5" and then press tab, it then auto completes to "margin-top: 5px;". If I write "tdu"+tab and then it goes "text-decoration: underline;". The IDE also shows me in a drop down all the options that can be used after writing "text-decoration". Changing standards be…

Yeah exactly. SASS would give all the same benefits and ease of use and still allow semantic html.

Re: Tailwind: style your site without writing any CSS

#57

Post by robotmay » Fri, Nov 02, 2018, 2:58 PM UTC

I've been using Tailwind lately and I really like it. It lets me prototype and iterate quickly, and then when I've settled on a design I can create component classes for those completed styles. It has made doing frontend work slightly more bearable for me.

Re: Tailwind: style your site without writing any CSS

#58

Post by androidgirl » Fri, Nov 02, 2018, 2:59 PM UTC

chrisfrank wrote: post #43

androidgirl wrote: post #36

I really like these atomic/functional css libraries with any sort of frontend framework or templating system that leverages components. Personally, I have been using Tachyons with React for the past couple months, and it's been a blast. Compared to writing html templates with Emmet and css with Sass, I feel as if I am more productive and like I can reuse more components. It's worth a try if it interests you!

I've also found Tachyons & React to be an amazing combination. The only trouble I've had is extracting common CSS class strings into tweakable components, e.g. a whose background color you can easily override, or a with tweakable font weight. I wrote a tiny (1kb) library to make this easier. For anyone working with React and functional CSS, I hope it's helpful: https://www.npmjs.com/package/nanostyled

Seems like an interesting library! I also encountered this issue, but I ended up just passing in colors/borders/spacing as props. I will have to see how that holds up for complicated UIs.

Re: Tailwind: style your site without writing any CSS

#59

Post by codeaken » Fri, Nov 02, 2018, 3:01 PM UTC

blinky1456 wrote: post #46

lmm wrote: post #45

I've been saying for years that, in these days where all HTML is generated, CSS makes no sense and we might as well just style inline. You probably already have a "button" class in your UI framework that contains the HTML for rendering a button; put the styling there too.

So if you have a large number of buttons or other elements with the same class you will be repeating yourself over and over. With elements with a large number of style rules, you add a lot of very long lines to your html. This would be a nightmare to work on/maintain.

You can use components for this scenario https://tailwindcss.com/docs/extracting-components

Re: Tailwind: style your site without writing any CSS

#60

Post by jherdman » Fri, Nov 02, 2018, 3:02 PM UTC

Raphmedia wrote: post #31

Sounds to me like the author should simply use SASS + a good autocomplete feature in their IDE. When I write CSS, I use a lot of shortcuts. I simply write "mt5" and then press tab, it then auto completes to "margin-top: 5px;". If I write "tdu"+tab and then it goes "text-decoration: underline;". The IDE also shows me in a drop down all the options that can be used after writing "text-decoration". Changing standards be…

The project in question uses PostCSS, which is to CSS as Babel is to Javascript.

The point of a broad set of utility classes is to have predefined and discrete classes that map to conventions your application uses. Here's a few examples from an app I use:

.u-colorPrimary { font-color: var(--utils-css-c-primary) !important;; }

.u-textSmall { font-size: 0.75rem; }

Each of these are a "standard" that we use throughout the app. There are NO one-offs. These can then be composed into "component" classes (e.g. .Button, or .TextInput).

The benefit is mostly threefold:

* Maintainability is great. No hunting throughout the templates when you want to change the primary colour. Just update the .u-colorPrimary class, or its underlying variable. * Our developers can look at a design and mostly do it themselves. No need for a CSS pro to come in. * We can package these into a node module and share them across our apps.

You're right: this is laziness. I don't like to repeat myself, and I like consistency.