4 ms·
Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the prod
by M4v3R 3y ago
Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioning the whole cascading part where you could never actually be sure just from glancing at the code what will be the resulting css. That second point is probably the most understated feature of Tailwind - you never have to wonder about the styling of an element again, because everything is right there in the classnames. The added benefit is that it basically forces you to write your UI code using components to prevent repetition - it encourages the best practice (note that this is where I think the OP went wrong when they asked “How to clean things up?” - the “@apply” keyword exists but it’s not meant to be overused as a replacement to proper code refactoring).
It’s not without its flaws - you have to learn a new syntax (which is in most cases very intoitive, e.g. “align-items: center” becomes “items-center”, “margin: 0” becomes “m-0” etc.) and it has its gotchas (for example it generates the css at build time by scanning your code and extracting classes you use to prevent generating unused css, which makes it impossible to construct a classname dynamically e.g. `gap-${value}`) but I take these issues over having to write CSS in any other way.
One point where I 100% do agree with the author though - you should first learn CSS before learning Tailwind. Not only because Tailwind could go away some day, but because this will give you a deeper understanding how and why stuff works.
- nrk9819 3y agoUnlike many, I was never skeptical of Tailwind. A few years ago, I'd chase whatever the "cool" and "trendy" thing in the market. So I started using tailwind in 2021. Initially it felt very productive especially for personal projects. Then over time, as utilities increased, so did my cognitive overhead. Also I'll never be able to understand to point of having extremely atomic utils like `bg-color-green-100`, `pb-40` and such. We have custom properties for that and for a large design system, maintaining variables in a css file is more ergonomic than editing a tailwind config.
- tipiirai 3y agoNaming things is notoriously hard, but it's a skill you need to master to make reusable things. You name things that repeat. Think of function names in JavaScript, class names in object-oriented languages, or component names in Figma.
- nrk9819 3y agoas a designer, ability of naming thing is extremely crucial regardless of how hard it is. As you mentioned figma, I agree that not just the components, but also frames should be named properly.
- meowtimemania 3y agoIdeally we shouldn’t have to name things that are never reused. Often class names are only ever used once. There isn’t much benefit in naming the class.
- M4v3R 3y agoYeah, this is exactly my point. I still need to name my reusable components, but I don’t need to name every single html element I want to style.
- tipiirai 3y agoYou only need to name the top-level element. Others can be styled with CSS selectors. Nesting is supported with Lightning CSS today.
- angio 3y agoYou can still name things in Tailwind + React (create a new component or variant), what changes is that if I need to add a 10px margin on the right I don't have to create a new component (like when using styled components), I simply override `className` and move on.
- jonwinstanley 3y agoTailwind lets you stick to just naming your components, don't bother trying to give names to all the re-usable sets of styles
- mmcnl 3y agoDynamic class names can work if you use a configuration approach. https://tailwindcss.com/docs/content-configuration#dynamic-class-names https://tailwindcss.com/docs/content-configuration#dynamic-c...
- fabiospampinato 3y ago> 1) I never knew how much I disliked naming things before I didn’t need to do that anymore I never understood this argument about naming. You need to name the component anyway just to be able to reference it somewhere? You need to give the folder or the file where this component is defined a unique name anyway? Internal nodes technically don't need to be named when using Tailwind, but if for example I'm writing a Slider component, do I not want to name the "handle" thing that can be dragged anyway? How was finding the "handle" word a non-insignificant hurdle? And if I need to talk about this element with a colleague what would you call it anyway?
- ofrzeta 3y agoFor testing you usually need a name or "id" or, if using Playwright, a "data-testid" attribute :)