Tailwind UI

#1

Post by alt3red » Wed, Feb 26, 2020, 1:54 PM UTC

Re: Tailwind UI

#2

Post by juretriglav » Wed, Feb 26, 2020, 2:04 PM UTC

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

There are also live demos of the app and marketing pages:

1. https://tailwindui.com/page-examples/landing-page-01

2. 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

Re: Tailwind UI

#3

Post by hadrien01 » Wed, Feb 26, 2020, 2:30 PM UTC

juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. 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

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

Re: Tailwind UI

#4

Post by rado » Wed, Feb 26, 2020, 2:32 PM UTC

juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. 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

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

Re: Tailwind UI

#5

Post by atonse » Wed, Feb 26, 2020, 2:36 PM UTC

It's really nice, but is there something this pretty for bootstrap?

I literally manage something like 10 different products/websites. And the only way to stay sane and have some pace with features is to use bootstrap for all of them (we currently use bootstrap for maybe 5 of them, and the rest were inherited sites that we're migrating).

I love the look of this but don't have the time or the will to migrate all our sites to learn yet another CSS meta-language with its own sets of concepts and classes.

Re: Tailwind UI

#6

Post by deweller » Wed, Feb 26, 2020, 2:37 PM UTC

rado wrote: post #4

juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. 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

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

For comparison, what is bootstrap v4's weight?

Re: Tailwind UI

#7

Post by philippbosch » Wed, Feb 26, 2020, 2:38 PM UTC

rado wrote: post #4

juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. 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

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

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.

Re: Tailwind UI

#8

Post by 32gbsd » Wed, Feb 26, 2020, 2:39 PM UTC

I like the clean look but still all the web homology unite! https://vimeo.com/393580241/82c6d7c5f6

Re: Tailwind UI

#9

Post by chrshawkes » Wed, Feb 26, 2020, 2:42 PM UTC

philippbosch wrote: post #7

rado wrote: post #4

Earlier quoted context omitted.

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

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.

I'm tired of excuses for inferior tooling. If you truly know CSS, Tailwind is a waste of time.

Re: Tailwind UI

#10

Post by psychometry » Wed, Feb 26, 2020, 2:44 PM UTC

rado wrote: post #4

juretriglav wrote: post #2

I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. 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

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

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.