8 ms·

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components https://tail

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 https://tailwindui.com/page-examples/landing-page-01 2. https://tailwindui.com/page-examples/detail-view-01# https://tailwindui.com/page-examples/detail-view-01# Plus a screencast on how to use it to build these pages: https://vimeo.com/393580241/82c6d7c5f6 https://vimeo.com/393580241/82c6d7c5f6

hadrien01 7y ago
How did you access the page examples? I can't find a link to them on their components page.
- juretriglav 7y ago
  They were linked to in a message via their mailing list.
rado 7y ago
Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.
- deweller 7y ago
  For comparison, what is bootstrap v4's weight?
  - gyrgtyn 7y ago
    https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra... is about 20K, gzipped plus javascripts
- philippbosch 7y ago
  Yes, but that's just because I think for simplicity they created one large CSS file that is used for all their components and example pages. That's not very realistic. You're not supposed to do it like this for your own project. Instead if you use Tailwind CSS and PurgeCSS I'm pretty sure you would end up with ~10 or 15 kB of CSS gzipped, maybe less.
  - chrshawkes 7y ago
    I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.
    - larrywright 7y ago
      If you truly know assembler, C/Python/Ruby/Go is a waste of time. See how dumb that sounds?
      - chrshawkes 7y ago
        Disagree. Dumb is doing the same thing over and over again and creating new tooling to do the same thing over and over but with added dependencies and frameworks. The fundamentals of web development have barely changed but the flavor of the month way of doing the same thing is constant.
        larrywright 7y ago
        HTML and css are way too low level to be productive in, in my opinion. Especially when dealing with wide ranges of screen sizes, browsers, and platforms. The only way I’m interested in touching the stuff is if there are tools to alleviate the pain. Caveat: not a UI developer, I’ve mostly done backend work And DevOps for quite some time.
        wolco 7y ago
        HTML and CSS are too low level? Does such a tool like dreamweaver with response rendering exist? It's an interesting concept.
- psychometry 7y ago
  I'm sure that in an actual project, you can use tree shaking or a custom build to avoid including components you don't need.
  - Tomte 7y ago
    Is there a production-ready CSS purger that's not written in JavaScript? Last time I looked I couldn't find any. I'm not particularly against JavaScript, but I'm not willing to install and use npm and several hundred dependencies. All documentation for purgecss always includes postcss and a gazillion other packages I have never heard of. Maybe something in Go, as a single executable?
    - philippbosch 7y ago
      I don't know a non-JS CSS purger, but you don't need postcss to use PurgeCSS. https://purgecss.com/CLI.html https://purgecss.com/CLI.html
    - phponpcp 7y ago
      "but I'm not willing to install and use npm and several hundred dependencies" Good luck being a employable lol
      - Tomte 7y ago
        Fortunately, there are many IT jobs that don't include any web work.
    - leeoniya 7y ago
      https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss still in js, but very fast, ~10KB (min), 0 dependencies, and does not require npm [1]: however, it expects properly formed html and css; the parsers are quite unforgiving. (i'm the author) [1] https://github.com/leeoniya/dropcss/tree/master/dist https://github.com/leeoniya/dropcss/tree/master/dist
      - 7y ago
- jacobsenscott 7y ago
  Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you can interact with your application live, in real time. It is a really amazing time to be building software now. So, again, welcome.
  - nolok 7y ago
    Congratulations on leaving your bubble. And welcome to the developping world. 165kb is a pain in the ass over 3G, and when people buy loads for them sim card giving them a data amount still measured in megabytes, it matters a lot, even the big ones like facebook had to make lite versions because of it. You're going to rediscover all kinds of other cool cool stuff you forgot you could do whle wasting resources in the last decades. With everyone going with bloated mess and electron apps, it is a really amazing time to be building snappy softwares now. So, again, welcome. (the arrogant tone of your message was really misplaced)
  - iSnow 7y ago
    >Congratulations on building your time machine. And welcome to 2020. Please don't do that. You are using sarcasm to ridicule the guy you are responding to, and that's an unproductive way to argue. It is also against HN comment guidelines (https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html): "Be kind. Don't be snarky. Comments should get more thoughtful and substantive, not less, as a topic gets more divisive. Have curious conversation; don't cross-examine. ... Please respond to the strongest plausible interpretation of what someone says, not a weaker one that's easier to criticize. Assume good faith."
  - karatestomp 7y ago
    REPLs are not new. At all. 165KB is still a lot of pretty-making text. Attitudes like that are why "webapps" eat hundreds of megabytes of memory for tasks where low-tens would be more than enough, even allowing for some slopping programming and lots of abstractions. That 165KB hangs around in memory in probably more than one form, and becomes part of future layout decisions on the page, if they come up.
psychometry 7y ago
All of these new frameworks look great, but there just isn't a good way to switch from, e.g., Bootstrap to a new one. I've never come across a framework that had any kind of conversion tool or even a guide on how to efficiently switch.
- jmcharnes 7y ago
  Jason McCreary from Laravel Shift made a tool called Tailwind Converter which will convert Bootstrap code to TailwindCSS. It's pretty wild. https://laravelshift.com/convert-bootstrap-to-tailwind-css https://laravelshift.com/convert-bootstrap-to-tailwind-css
  - wolco 7y ago
    It converts the css but keeps the markup.
- Cthulhu_ 7y ago
  Right now I don't think CSS frameworks are intended to be a drop-in replacement; each one will also introduce a subtle change in style that you have to work with. In theory you can rebuild your application reusing functional components and only replacing visual ones, but it's still going to be a lot of work. But I think a lot of people wouldn't just replace the CSS framework, they'll rethink the whole UI and everything that goes with it with a big operation like that.
6510 7y ago
<p class="piew1 piew2 piew3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis. Nemo expedita voluptas culpa sapiente alias molestiae" id="Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita voluptas culpa sapiente alias molestiae. Numquam corrupti in laborum sed rerum et corporis. Nemo expedita voluptas culpa sapiente alias molestiae"> </sarcasm>
tpetry 7y ago
Do these stylistic simple preview images have a name? I have been searching for these for a long time to use in my application without designing them all by my own. A free-to use pack of these would be really great.
- swanson 7y ago
  "Product Illustration" is what Steve (the designer) calls them. See: https://www.youtube.com/watch?v=1HDR-AV4ODU https://www.youtube.com/watch?v=1HDR-AV4ODU for a livestream of how he makes them

hadrien01 7y ago

How did you access the page examples? I can't find a link to them on their components page.

juretriglav 7y ago
They were linked to in a message via their mailing list.

rado 7y ago

Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.

deweller 7y ago
For comparison, what is bootstrap v4's weight?
- gyrgtyn 7y ago
  https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra... is about 20K, gzipped plus javascripts
philippbosch 7y ago
Yes, but that's just because I think for simplicity they created one large CSS file that is used for all their components and example pages. That's not very realistic. You're not supposed to do it like this for your own project. Instead if you use Tailwind CSS and PurgeCSS I'm pretty sure you would end up with ~10 or 15 kB of CSS gzipped, maybe less.
- chrshawkes 7y ago
  I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.
  - larrywright 7y ago
    If you truly know assembler, C/Python/Ruby/Go is a waste of time. See how dumb that sounds?
    - chrshawkes 7y ago
      Disagree. Dumb is doing the same thing over and over again and creating new tooling to do the same thing over and over but with added dependencies and frameworks. The fundamentals of web development have barely changed but the flavor of the month way of doing the same thing is constant.
      - larrywright 7y ago
        HTML and css are way too low level to be productive in, in my opinion. Especially when dealing with wide ranges of screen sizes, browsers, and platforms. The only way I’m interested in touching the stuff is if there are tools to alleviate the pain. Caveat: not a UI developer, I’ve mostly done backend work And DevOps for quite some time.
        wolco 7y ago
        HTML and CSS are too low level? Does such a tool like dreamweaver with response rendering exist? It's an interesting concept.
psychometry 7y ago
I'm sure that in an actual project, you can use tree shaking or a custom build to avoid including components you don't need.
- Tomte 7y ago
  Is there a production-ready CSS purger that's not written in JavaScript? Last time I looked I couldn't find any. I'm not particularly against JavaScript, but I'm not willing to install and use npm and several hundred dependencies. All documentation for purgecss always includes postcss and a gazillion other packages I have never heard of. Maybe something in Go, as a single executable?
  - philippbosch 7y ago
    I don't know a non-JS CSS purger, but you don't need postcss to use PurgeCSS. https://purgecss.com/CLI.html https://purgecss.com/CLI.html
  - phponpcp 7y ago
    "but I'm not willing to install and use npm and several hundred dependencies" Good luck being a employable lol
    - Tomte 7y ago
      Fortunately, there are many IT jobs that don't include any web work.
  - leeoniya 7y ago
    https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss still in js, but very fast, ~10KB (min), 0 dependencies, and does not require npm [1]: however, it expects properly formed html and css; the parsers are quite unforgiving. (i'm the author) [1] https://github.com/leeoniya/dropcss/tree/master/dist https://github.com/leeoniya/dropcss/tree/master/dist
    - 7y ago
jacobsenscott 7y ago
Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you can interact with your application live, in real time. It is a really amazing time to be building software now. So, again, welcome.
- nolok 7y ago
  Congratulations on leaving your bubble. And welcome to the developping world. 165kb is a pain in the ass over 3G, and when people buy loads for them sim card giving them a data amount still measured in megabytes, it matters a lot, even the big ones like facebook had to make lite versions because of it. You're going to rediscover all kinds of other cool cool stuff you forgot you could do whle wasting resources in the last decades. With everyone going with bloated mess and electron apps, it is a really amazing time to be building snappy softwares now. So, again, welcome. (the arrogant tone of your message was really misplaced)
- iSnow 7y ago
  >Congratulations on building your time machine. And welcome to 2020. Please don't do that. You are using sarcasm to ridicule the guy you are responding to, and that's an unproductive way to argue. It is also against HN comment guidelines (https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html): "Be kind. Don't be snarky. Comments should get more thoughtful and substantive, not less, as a topic gets more divisive. Have curious conversation; don't cross-examine. ... Please respond to the strongest plausible interpretation of what someone says, not a weaker one that's easier to criticize. Assume good faith."
- karatestomp 7y ago
  REPLs are not new. At all. 165KB is still a lot of pretty-making text. Attitudes like that are why "webapps" eat hundreds of megabytes of memory for tasks where low-tens would be more than enough, even allowing for some slopping programming and lots of abstractions. That 165KB hangs around in memory in probably more than one form, and becomes part of future layout decisions on the page, if they come up.

psychometry 7y ago

All of these new frameworks look great, but there just isn't a good way to switch from, e.g., Bootstrap to a new one. I've never come across a framework that had any kind of conversion tool or even a guide on how to efficiently switch.

jmcharnes 7y ago
Jason McCreary from Laravel Shift made a tool called Tailwind Converter which will convert Bootstrap code to TailwindCSS. It's pretty wild. https://laravelshift.com/convert-bootstrap-to-tailwind-css https://laravelshift.com/convert-bootstrap-to-tailwind-css
- wolco 7y ago
  It converts the css but keeps the markup.
Cthulhu_ 7y ago
Right now I don't think CSS frameworks are intended to be a drop-in replacement; each one will also introduce a subtle change in style that you have to work with. In theory you can rebuild your application reusing functional components and only replacing visual ones, but it's still going to be a lot of work. But I think a lot of people wouldn't just replace the CSS framework, they'll rethink the whole UI and everything that goes with it with a big operation like that.

6510 7y ago

tpetry 7y ago

Do these stylistic simple preview images have a name? I have been searching for these for a long time to use in my application without designing them all by my own. A free-to use pack of these would be really great.

swanson 7y ago
"Product Illustration" is what Steve (the designer) calls them. See: https://www.youtube.com/watch?v=1HDR-AV4ODU https://www.youtube.com/watch?v=1HDR-AV4ODU for a livestream of how he makes them