10 ms·

Twin – Tailwind with the flexibility of CSS-in-JS

52 points by fmoronzirfas 6y ago

machinelabo 6y ago
This is the epitome of a cliche JS project: Emojis in docs? Check Piles of abstraction layers? Check No tests? Check Already at version 2, but has breaking changes? Check Stacking up on yet-to-be-proven-framework (tailwind)? Check We just need a BLM support message, donation link in the npm install stdout and some more JS shenanigans like support for yarn, gulp, webpack, npx, degit, and the next gen packaging tool soon™ to be released. Sorry if this is offensive, but this ecosystem offends me and my sanity. This project is going to last 6 months and they'll move onto something else. I think I am finally ready to jump on React since it has been a few years and appears to be stable. Edit: My ramblings are unfair. There are tests.
- bitten 6y ago
  I see tests in the repo :p
  - machinelabo 6y ago
    Yikes, my bad. I didn't see a test folder. I am just learning JS coming from an enterprise Java background. We've got our own pile of shenanigans as well, probably just as bad as the JS world, don't worry!
    - cutler 6y ago
      Don't worry, you can have your public static AbstractProxyFactoryBuilder with Typescript to make you feel at home.
      - machinelabo 6y ago
        Ok, I am done with this. Anyone wanna start a tea shop in a small town in Asia? I am down. We can bootstrap it, live a simpler life and mingle with the locals. May be even create a little ordering system, postgres v9 in the backend, running on a dingy moth balled Dell PC under the cash register and use jQuery frontend, of course limited to 1024x768 resolution monitor from Compaq with a broken power button.
        Brajeshwar 6y ago
        Can I, please, join too. I will do all the interfaces in XUL and will optimize the heck out of it to work on IE.
        cutler 6y ago
        Sign me up. Procedural PHP4 preferred or Perl/CGI.pm.
        machinelabo 6y ago
        I approve of this stack. No version control because we would just do this in one shot and the never add any features. The time saved will be spent with friends at the tea shop. An occasional bug fix for a customer that ordered over 32768 rupees of tea for a wedding party.
        Brajeshwar 6y ago
        LOL! That customer is my wife. ₹32,768 is a good sum for tea. (If this is Indian Rupee, btw, it is less than $500).
        cutler 6y ago
        Lapsang Souchong takes me back to my student days with Pascal and Wirth.
        jamil7 6y ago
        I would unironically love to do this.
        idkwhoiam 6y ago
        Small towns in Asia have millions in population :D
        degurechaff 6y ago
        yup. my town in java have 1.6 millions people :)
    - sbergot 6y ago
      So you are just learning JS but felt legitimate enough to post an unfair rant?
- fatonR 6y ago
  I couldn't agree more.
- jamil7 6y ago
  I picked up a React Native project for next year and am sort of terrified of what I might find jumping back into the world of JS after some time away from it.
- numlock86 6y ago
  > and the next gen packaging tool soon™ Well, there is ParcelJS [1], which has all of the above including the BLM landing page. [1]: https://parceljs.org/ https://parceljs.org/
  - neya 6y ago
    WTF! The entire purpose of a webpage is to describe to an end user what it is about. I understand the need to support a social cause, but this is just ridiculous to mask your entire site with a label to the point where no one knows what the fuck your product/service/offering is about.
    - blakblakarak 6y ago
      Whatever you do, don't look at the RXJS docs: https://rxjs-dev.firebaseapp.com/ https://rxjs-dev.firebaseapp.com/
- deleted 6y ago
  [deleted]
- elygre 6y ago
  What do you mean by “BLM support message”?
  - tannhaeuser 6y ago
    "Black lives matter" I guess.
  - girvo 6y ago
    A number of JavaScript projects have put support messages for the Black Lives Matter movement into the top of their README or home pages. I think it’s an excellent thing, personally.
    - saturn_vk 6y ago
      I agree with the sentiment that BLM, but I don't see how a message/banner/whatever helps in the matter.
      - ficklepickle 6y ago
        Autist here. I see this with so much human behaviour. Often the purpose seems not to be actual measurable progress but rather social signalling. I suppose it serves a social purpose, perhaps it is a precursor to material change. I feel it is important to remember that humans are tribal apes. If we deny our nature, it is much harder to overcome.
    - neilsense 6y ago
      It's a nonsense thing but, hey, it's easier than doing something of actual value.
- neya 6y ago
  I am not attacking any individual developer or project here, but in recent times, there's been a trend I've been observing and what you're pointing out. I call it the Hipster Driven Development phenomena* and it's just getting worse with every year. People just start by discarding established best practices in the name of being unique and cool and then wind up to the inevitable conclusion - the established best practices were there for a reason. There's been many such trends to name a few - discarding years worth of stable codebases to try out some shiny new framework, throw away proven technologies to trade for some perceived developer convenience (Eg. PostgreSQL to MongoDB), labeling known terminologies to sound cool (Hacker vs Growth 'Hacker'). All these hipster moves come with a huge cost - they cost morale, time, money, teams, relationships. It just feels so unnatural to accept this as the norm. In comparison, I just feel like some old dude from the 1950s rambling though these things have started to happen only the last half of the decade or so. Where did we go wrong? Edited for OT
  - olieidel 6y ago
    Agree, an interesting observation! I wonder: Junior developers nowadays who learn JS and React as their first, go-to stack for web development, they haven't ever experienced the raw productivity of "just write php and upload it via ftp" or "just write it in rails/django and render stuff server-side". They come to expect that all development is as slow as theirs, including frontend <--> backend apis (graphql), huge js complexity (webpack), breaking changes (react-router), etc. I see lots of companies nowadays wanting to hire "React devs". It seems we're collectively forgetting how fast you can ship stuff if you just use proven technology. Makes me wonder where we're headed. Maybe it'll be a competitive advantage to use old (= proven) technology in the future?
    - cutler 6y ago
      You gotta hand it to the Rails team who came up Stimulus [Reflex] as an antidote to all the SPA abuse.
  - deleted 6y ago
    [deleted]
  - 6y ago
- deleted 6y ago
  [deleted]
- sbergot 6y ago
  Sorry to burst your bubble but Tailwind is anything but "yet-to-be-proven-framework". It is a very solid and powerful abstraction that has existed for 3 years. Speaking of piles of abstractions, please enlighten me. What is not a pile of abstraction today? Even x86 instructions are implemented with microcode. Speaking of tests, anyone with some frontend experience will recognize that jest is a testing library. I would say that your comment is the epitom of a HN frontend thread ie mean criticism by someone with 0 experience in the field.
  - machinelabo 6y ago
    Oh please. Tailwind’s entire premise stands on these pillars which are shaky at best: - Developers don’t want to write css so they add insane amounts of nuisance in templates. Impossible to read the design language. - The original author of Tailwind complains about naming classes in the css but Tailwind ironically names things that are “tx—-bb-4-2” or whatever the hell that means. No thanks, I’ll write “customer-support-card” or something useful. Maybe even more generic - “card”. - Tailwind’s front page is everything that’s wrong with this. Moving around components with “mr-4” tags and shifting it up. Left. Right. Making it larger. That means that there is no standardized design language and you’ll create design that will have no cohesive unity. One component will have “mr-4” margin and another “mr-3”. We have the technology. Sass can create compositional components with reusability and logical hierarchy. There is no need for this Tailwind nonsense. Tailwind is a controversial project, not mature. It’s proponents think that others just don’t get it. No, we do. We’ve used it and it makes it very fast to get something working but that’s more telling about one’s inability to take the time to think about layout/design and writing proper sass.
    - type0 6y ago
      Tailwind is just like shorthand, it might not be useful to you but it is useful for some fast prototyping and iteration.
      - machinelabo 6y ago
        Agreed and that’s it’s only selling point. Fast is not always better. It makes spaghetti code with shit design that lacks an architect behind it. There are many threads on HN about Tailwind and it’s always very controversial. I wouldn’t call this thing mature when there is so much controversy.
cutler 6y ago
This just makes my eyes bleed. CSS-in-JS was bad enough but now you want to mix-in SASS and Tailwind? Is there a prize or something for the number of technologies which can be squeezed into a line of JS? Please stop it.
- Tade0 6y ago
  Have you seen this year's State of JS? https://stateofjs.com/ https://stateofjs.com/ Makes one wonder if anyone even bothers to learn CSS nowadays. Perhaps we wouldn't have Tailwind or CSS-in-JS if more people did.
  - machinelabo 6y ago
    The word "Trend" makes me shiver in bitterness. Why are there trends in software development? Are we trying to solve problems or we're trying to be trendy? Is this a clothing industry? I would have thought we should use mature technologies that have been vetted and gone through the trough of disillusionment and onto the ramp of productivity. Proven tech stack that I can rely on gives me peace. Older the tech, the more reliable it is. The opposite of "trendy" is what we need to popularize and make it cool. It should be cool to use a 5 year old library in JS!
    - rado 6y ago
      Trends are the single worst thing in this industry on all executive and developer levels.
    - ketzu 6y ago
      When there is change, there are trends. You don't have to follow them, but some are working on what they think are improvements and others are interested in staying updated on them. Be it novel programming languages or javascript libraries. It is cool to use 5 year old JS projects like React. If you look at the projects listed in the report, you see the graphs going back to 2016. Which is 5 years ago. And how they have been popular for 5 years.
    - brundozer 6y ago
crubier 6y ago
Slow at bundle time like tailwind, AND slow at runtime like css in js. I don’t get these tools, the whole point of tailwind for me is the runtime performance combined with high flexibility! Twin is the worst of both worlds. The runtime cost of css in js is real, and becoming a real problem for my app. Seeing like 2x slowdown as compared to classnames like in https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/ https://calendar.perfplanet.com/2019/the-unseen-performance-...
- numlock86 6y ago
  > Slow at bundle time like tailwind, AND slow at runtime like css in js. Well, something needs to justify all those latte orders while you patiently chill in front of your Mac for over two hours in the store.
rado 6y ago
Where is the demo? Devs, please always post a demo accessible with a single click. You don't have to pay for hosting or anything.
- numlock86 6y ago
  https://tailwindcss.com/ https://tailwindcss.com/
tobr 6y ago
So. The readme doesn’t mention React. As far as I can tell it’s not because it’s compatible with everything. Looks more like it’s the “Fish don’t know they’re in water” phenomenon. The author just assumes that the reader will assume that everything is for React only. (I might be wrong! The readme really doesn’t make it clear either way) One of the nice things about Tailwind is that it’s completely portable, because it’s ”just” CSS. You can use the exact same design system regardless of how your markup ends up on the screen, as long as you can set a class attribute.
- m8s 6y ago
  As best I can tell, it’s not React-specific. Check the How It Works [1] section. You can use this anywhere you use styled-components or emotion. [1] https://github.com/ben-rogerson/twin.macro#how-it-works https://github.com/ben-rogerson/twin.macro#how-it-works
Vinnl 6y ago
I'd be interested in a description of the actual real-world benefits the "magic of Tailwind" and the "flexibility of CSS-in-JS" provide. I've only just started trying to understand what concrete advantages Tailwind brings [1], but as I understood it, one of its advantages is that it's not CSS-in-JS. Because it's not necessary: CSS-in-JS prevents styles from one component leaking into another, but Tailwind classes already only apply to the element they are added to. I'm not ready to dismiss new initiatives off the bat (if anything they can at least be a good learning experience), but I'd like more concrete terms than "magic" and "flexibility" to help me understand the potential benefits. [1] https://twitter.com/VincentTunru/status/1330103979762651138 https://twitter.com/VincentTunru/status/1330103979762651138
- the_other 6y ago
  > classes already only apply to the element they are added to. So they're IDs, not classes?
  - Vinnl 6y ago
    Ah sorry, I worded that incorrectly. Should've been "the styles defined via Tailwind classes already only apply to the element they are added to." (Ninja edit:) So to clarify: if I want to add some padding to an element with plain CSS, I have to think of a class name for that element, and then define styles for that class. However, if I happen to use that class name elsewhere in my code, then the styles I've defined there suddenly apply to that element as well. And vice versa: before I can delete a class from my code base, I have to be aware of every element that uses it. CSS-in-JS solves that: all styles defined for a single component will only ever apply to that component. The same holds true for Tailwind: you define the styles through the classes you apply, which will not affect other components in your codebase, and likewise, removing them (the Tailwind classes) is safe as well.
- sbergot 6y ago
  This post is a good description of why some people like functional css: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
m8s 6y ago
Jeez, you’d think you were on Reddit with all these comments. Like it or not, Tailwind (and things that help people use Tailwind) serves a very valid niche. Unwrapping years of legacy CSS, intertwined with CSS injection in jQuery, is no simple feat. Adding Tailwind to that project and only writing Tailwind has helped immensely. The downside is that there are times when you have a really long list of classes on a given tag, which can be difficult to read and parse. I’m not sure if this tool is right for me or my team, but that’s one use case I could see for using it. Are we really complaining about emojis in READMEs nowadays? Good grief.
- brundozer 6y ago
  You can combine together theses classes in another class name for reusability. I've been doing CSS for 15 years and I love tailwind. It's just a bunch of handful predefined classes but they encourage you to write everything in small, single-purposed classes that you combine together. You can absolutely do that with CSS (and some people probably did for years), but having theses classes already available kind of shows you the way.
- sbergot 6y ago
  I am saddened by all the negativity around those new css approach. I like most HN threads but anything frontend is laughed at by people with little frontend experience. They repeat some truth they learned 20 years ago. Honestly HN is not a good place to discuss frontend stuff. You will only see "get off my lawn" kind of comments.
  - crubier 6y ago
    I posted a negative comment here (look it up), and I can explain why I still believe my comment is constructive, and why I don't think I fit in "people with little frontend experience". It's not an appeal to authority, but more a rebuttal of you affirmation that HN is full of "non frontend people" 1. I have a passion for front end, I have a PhD in Human Computer Interaction. 3. I am the cofounder and CTO of a company whose main product is based on CSS-in-JS (Emotion, Chakra UI) 2. I really like Tailwind and used it on several production projects. 4. So I know very well both of these approaches. I know their advantages and drawbacks. 5. In my comment I state the sad truth about this particular project: It combines the worst of both approaches in terms of performance, without any added value as compared to these approaches. Slow build AND slow runtime, without any added modularity. This approach is objectively bad and this is why people react like this. And to be constructive: If you want to use tailwind, use tailwind and you will have performant runtime but less customizability. If you want to use CSS-in-JS, use it and you will have customizability, but slower runtime. Engineering is trade-offs, but twin is still the worst of both worlds.
progx 6y ago
Am i the only one that find that code examples really hard to read? Why not just simple use Svelte?

52 points by fmoronzirfas 6y ago

This is the epitome of a cliche JS project: Emojis in docs? Check Piles of abstraction layers? Check No tests? Check Already at version 2, but has breaking changes? Check Stacking up on yet-to-be-proven-framework (tailwind)? Check We just need a BLM support message, donation link in the npm install stdout and some more JS shenanigans like support for yarn, gulp, webpack, npx, degit, and the next gen packaging tool soon™ to be released. Sorry if this is offensive, but this ecosystem offends me and my sanity. This project is going to last 6 months and they'll move onto something else. I think I am finally ready to jump on React since it has been a few years and appears to be stable. Edit: My ramblings are unfair. There are tests.

bitten 6y ago
I see tests in the repo :p
- machinelabo 6y ago
  Yikes, my bad. I didn't see a test folder. I am just learning JS coming from an enterprise Java background. We've got our own pile of shenanigans as well, probably just as bad as the JS world, don't worry!
  - cutler 6y ago
    Don't worry, you can have your public static AbstractProxyFactoryBuilder with Typescript to make you feel at home.
    - machinelabo 6y ago
      Ok, I am done with this. Anyone wanna start a tea shop in a small town in Asia? I am down. We can bootstrap it, live a simpler life and mingle with the locals. May be even create a little ordering system, postgres v9 in the backend, running on a dingy moth balled Dell PC under the cash register and use jQuery frontend, of course limited to 1024x768 resolution monitor from Compaq with a broken power button.
      - Brajeshwar 6y ago
        Can I, please, join too. I will do all the interfaces in XUL and will optimize the heck out of it to work on IE.
      - cutler 6y ago
        Sign me up. Procedural PHP4 preferred or Perl/CGI.pm.
        machinelabo 6y ago
        I approve of this stack. No version control because we would just do this in one shot and the never add any features. The time saved will be spent with friends at the tea shop. An occasional bug fix for a customer that ordered over 32768 rupees of tea for a wedding party.
        Brajeshwar 6y ago
        LOL! That customer is my wife. ₹32,768 is a good sum for tea. (If this is Indian Rupee, btw, it is less than $500).
        cutler 6y ago
        Lapsang Souchong takes me back to my student days with Pascal and Wirth.
      - jamil7 6y ago
        I would unironically love to do this.
      - idkwhoiam 6y ago
        Small towns in Asia have millions in population :D
        degurechaff 6y ago
        yup. my town in java have 1.6 millions people :)
  - sbergot 6y ago
    So you are just learning JS but felt legitimate enough to post an unfair rant?
fatonR 6y ago
I couldn't agree more.
jamil7 6y ago
I picked up a React Native project for next year and am sort of terrified of what I might find jumping back into the world of JS after some time away from it.
numlock86 6y ago
> and the next gen packaging tool soon™ Well, there is ParcelJS [1], which has all of the above including the BLM landing page. [1]: https://parceljs.org/ https://parceljs.org/
- neya 6y ago
  WTF! The entire purpose of a webpage is to describe to an end user what it is about. I understand the need to support a social cause, but this is just ridiculous to mask your entire site with a label to the point where no one knows what the fuck your product/service/offering is about.
  - blakblakarak 6y ago
    Whatever you do, don't look at the RXJS docs: https://rxjs-dev.firebaseapp.com/ https://rxjs-dev.firebaseapp.com/
deleted 6y ago
[deleted]
elygre 6y ago
What do you mean by “BLM support message”?
- tannhaeuser 6y ago
  "Black lives matter" I guess.
- girvo 6y ago
  A number of JavaScript projects have put support messages for the Black Lives Matter movement into the top of their README or home pages. I think it’s an excellent thing, personally.
  - saturn_vk 6y ago
    I agree with the sentiment that BLM, but I don't see how a message/banner/whatever helps in the matter.
    - ficklepickle 6y ago
      Autist here. I see this with so much human behaviour. Often the purpose seems not to be actual measurable progress but rather social signalling. I suppose it serves a social purpose, perhaps it is a precursor to material change. I feel it is important to remember that humans are tribal apes. If we deny our nature, it is much harder to overcome.
  - neilsense 6y ago
    It's a nonsense thing but, hey, it's easier than doing something of actual value.
neya 6y ago
I am not attacking any individual developer or project here, but in recent times, there's been a trend I've been observing and what you're pointing out. I call it the Hipster Driven Development phenomena* and it's just getting worse with every year. People just start by discarding established best practices in the name of being unique and cool and then wind up to the inevitable conclusion - the established best practices were there for a reason. There's been many such trends to name a few - discarding years worth of stable codebases to try out some shiny new framework, throw away proven technologies to trade for some perceived developer convenience (Eg. PostgreSQL to MongoDB), labeling known terminologies to sound cool (Hacker vs Growth 'Hacker'). All these hipster moves come with a huge cost - they cost morale, time, money, teams, relationships. It just feels so unnatural to accept this as the norm. In comparison, I just feel like some old dude from the 1950s rambling though these things have started to happen only the last half of the decade or so. Where did we go wrong? Edited for OT
- olieidel 6y ago
  Agree, an interesting observation! I wonder: Junior developers nowadays who learn JS and React as their first, go-to stack for web development, they haven't ever experienced the raw productivity of "just write php and upload it via ftp" or "just write it in rails/django and render stuff server-side". They come to expect that all development is as slow as theirs, including frontend <--> backend apis (graphql), huge js complexity (webpack), breaking changes (react-router), etc. I see lots of companies nowadays wanting to hire "React devs". It seems we're collectively forgetting how fast you can ship stuff if you just use proven technology. Makes me wonder where we're headed. Maybe it'll be a competitive advantage to use old (= proven) technology in the future?
  - cutler 6y ago
    You gotta hand it to the Rails team who came up Stimulus [Reflex] as an antidote to all the SPA abuse.
- deleted 6y ago
  [deleted]
- 6y ago
deleted 6y ago
[deleted]
sbergot 6y ago
Sorry to burst your bubble but Tailwind is anything but "yet-to-be-proven-framework". It is a very solid and powerful abstraction that has existed for 3 years. Speaking of piles of abstractions, please enlighten me. What is not a pile of abstraction today? Even x86 instructions are implemented with microcode. Speaking of tests, anyone with some frontend experience will recognize that jest is a testing library. I would say that your comment is the epitom of a HN frontend thread ie mean criticism by someone with 0 experience in the field.
- machinelabo 6y ago
  Oh please. Tailwind’s entire premise stands on these pillars which are shaky at best: - Developers don’t want to write css so they add insane amounts of nuisance in templates. Impossible to read the design language. - The original author of Tailwind complains about naming classes in the css but Tailwind ironically names things that are “tx—-bb-4-2” or whatever the hell that means. No thanks, I’ll write “customer-support-card” or something useful. Maybe even more generic - “card”. - Tailwind’s front page is everything that’s wrong with this. Moving around components with “mr-4” tags and shifting it up. Left. Right. Making it larger. That means that there is no standardized design language and you’ll create design that will have no cohesive unity. One component will have “mr-4” margin and another “mr-3”. We have the technology. Sass can create compositional components with reusability and logical hierarchy. There is no need for this Tailwind nonsense. Tailwind is a controversial project, not mature. It’s proponents think that others just don’t get it. No, we do. We’ve used it and it makes it very fast to get something working but that’s more telling about one’s inability to take the time to think about layout/design and writing proper sass.
  - type0 6y ago
    Tailwind is just like shorthand, it might not be useful to you but it is useful for some fast prototyping and iteration.
    - machinelabo 6y ago
      Agreed and that’s it’s only selling point. Fast is not always better. It makes spaghetti code with shit design that lacks an architect behind it. There are many threads on HN about Tailwind and it’s always very controversial. I wouldn’t call this thing mature when there is so much controversy.

cutler 6y ago

This just makes my eyes bleed. CSS-in-JS was bad enough but now you want to mix-in SASS and Tailwind? Is there a prize or something for the number of technologies which can be squeezed into a line of JS? Please stop it.

Tade0 6y ago
Have you seen this year's State of JS? https://stateofjs.com/ https://stateofjs.com/ Makes one wonder if anyone even bothers to learn CSS nowadays. Perhaps we wouldn't have Tailwind or CSS-in-JS if more people did.
- machinelabo 6y ago
  The word "Trend" makes me shiver in bitterness. Why are there trends in software development? Are we trying to solve problems or we're trying to be trendy? Is this a clothing industry? I would have thought we should use mature technologies that have been vetted and gone through the trough of disillusionment and onto the ramp of productivity. Proven tech stack that I can rely on gives me peace. Older the tech, the more reliable it is. The opposite of "trendy" is what we need to popularize and make it cool. It should be cool to use a 5 year old library in JS!
  - rado 6y ago
    Trends are the single worst thing in this industry on all executive and developer levels.
  - ketzu 6y ago
    When there is change, there are trends. You don't have to follow them, but some are working on what they think are improvements and others are interested in staying updated on them. Be it novel programming languages or javascript libraries. It is cool to use 5 year old JS projects like React. If you look at the projects listed in the report, you see the graphs going back to 2016. Which is 5 years ago. And how they have been popular for 5 years.
  - brundozer 6y ago

crubier 6y ago

Slow at bundle time like tailwind, AND slow at runtime like css in js. I don’t get these tools, the whole point of tailwind for me is the runtime performance combined with high flexibility! Twin is the worst of both worlds. The runtime cost of css in js is real, and becoming a real problem for my app. Seeing like 2x slowdown as compared to classnames like in https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/ https://calendar.perfplanet.com/2019/the-unseen-performance-...

numlock86 6y ago
> Slow at bundle time like tailwind, AND slow at runtime like css in js. Well, something needs to justify all those latte orders while you patiently chill in front of your Mac for over two hours in the store.

rado 6y ago

Where is the demo? Devs, please always post a demo accessible with a single click. You don't have to pay for hosting or anything.

numlock86 6y ago
https://tailwindcss.com/ https://tailwindcss.com/

tobr 6y ago

So. The readme doesn’t mention React. As far as I can tell it’s not because it’s compatible with everything. Looks more like it’s the “Fish don’t know they’re in water” phenomenon. The author just assumes that the reader will assume that everything is for React only. (I might be wrong! The readme really doesn’t make it clear either way) One of the nice things about Tailwind is that it’s completely portable, because it’s ”just” CSS. You can use the exact same design system regardless of how your markup ends up on the screen, as long as you can set a class attribute.

m8s 6y ago
As best I can tell, it’s not React-specific. Check the How It Works [1] section. You can use this anywhere you use styled-components or emotion. [1] https://github.com/ben-rogerson/twin.macro#how-it-works https://github.com/ben-rogerson/twin.macro#how-it-works

Vinnl 6y ago

I'd be interested in a description of the actual real-world benefits the "magic of Tailwind" and the "flexibility of CSS-in-JS" provide. I've only just started trying to understand what concrete advantages Tailwind brings [1], but as I understood it, one of its advantages is that it's not CSS-in-JS. Because it's not necessary: CSS-in-JS prevents styles from one component leaking into another, but Tailwind classes already only apply to the element they are added to. I'm not ready to dismiss new initiatives off the bat (if anything they can at least be a good learning experience), but I'd like more concrete terms than "magic" and "flexibility" to help me understand the potential benefits. [1] https://twitter.com/VincentTunru/status/1330103979762651138 https://twitter.com/VincentTunru/status/1330103979762651138

the_other 6y ago
> classes already only apply to the element they are added to. So they're IDs, not classes?
- Vinnl 6y ago
  Ah sorry, I worded that incorrectly. Should've been "the styles defined via Tailwind classes already only apply to the element they are added to." (Ninja edit:) So to clarify: if I want to add some padding to an element with plain CSS, I have to think of a class name for that element, and then define styles for that class. However, if I happen to use that class name elsewhere in my code, then the styles I've defined there suddenly apply to that element as well. And vice versa: before I can delete a class from my code base, I have to be aware of every element that uses it. CSS-in-JS solves that: all styles defined for a single component will only ever apply to that component. The same holds true for Tailwind: you define the styles through the classes you apply, which will not affect other components in your codebase, and likewise, removing them (the Tailwind classes) is safe as well.
sbergot 6y ago
This post is a good description of why some people like functional css: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...

m8s 6y ago

Jeez, you’d think you were on Reddit with all these comments. Like it or not, Tailwind (and things that help people use Tailwind) serves a very valid niche. Unwrapping years of legacy CSS, intertwined with CSS injection in jQuery, is no simple feat. Adding Tailwind to that project and only writing Tailwind has helped immensely. The downside is that there are times when you have a really long list of classes on a given tag, which can be difficult to read and parse. I’m not sure if this tool is right for me or my team, but that’s one use case I could see for using it. Are we really complaining about emojis in READMEs nowadays? Good grief.

brundozer 6y ago
You can combine together theses classes in another class name for reusability. I've been doing CSS for 15 years and I love tailwind. It's just a bunch of handful predefined classes but they encourage you to write everything in small, single-purposed classes that you combine together. You can absolutely do that with CSS (and some people probably did for years), but having theses classes already available kind of shows you the way.
sbergot 6y ago
I am saddened by all the negativity around those new css approach. I like most HN threads but anything frontend is laughed at by people with little frontend experience. They repeat some truth they learned 20 years ago. Honestly HN is not a good place to discuss frontend stuff. You will only see "get off my lawn" kind of comments.
- crubier 6y ago
  I posted a negative comment here (look it up), and I can explain why I still believe my comment is constructive, and why I don't think I fit in "people with little frontend experience". It's not an appeal to authority, but more a rebuttal of you affirmation that HN is full of "non frontend people" 1. I have a passion for front end, I have a PhD in Human Computer Interaction. 3. I am the cofounder and CTO of a company whose main product is based on CSS-in-JS (Emotion, Chakra UI) 2. I really like Tailwind and used it on several production projects. 4. So I know very well both of these approaches. I know their advantages and drawbacks. 5. In my comment I state the sad truth about this particular project: It combines the worst of both approaches in terms of performance, without any added value as compared to these approaches. Slow build AND slow runtime, without any added modularity. This approach is objectively bad and this is why people react like this. And to be constructive: If you want to use tailwind, use tailwind and you will have performant runtime but less customizability. If you want to use CSS-in-JS, use it and you will have customizability, but slower runtime. Engineering is trade-offs, but twin is still the worst of both worlds.

progx 6y ago

Am i the only one that find that code examples really hard to read? Why not just simple use Svelte?