10 ms·

Show HN: Tailwind.run – An Online Playground for Tailwind CSS

181 points by utkarshkukreti 7y ago

utkarshkukreti 7y ago
Hey everyone! I tweeted a video of the app in action here: https://twitter.com/utkarshkukreti/status/1158323716515778560 https://twitter.com/utkarshkukreti/status/115832371651577856... I made this TailwindCSS Playground over the last two weeks. I really like the core idea of Tailwind and the productivity gains it gives and would like to build more stuff with it in the future! Features: * Compile custom @tailwindcss config and CSS in the browser * Live preview in 5 screen sizes * Class name autocompletion with CSS definition preview * Save code online or export .zip * Vim/Emacs/Sublime key bindings + Emmet
- Numberwang 7y ago
  It looks great. Do you know of any good tutorials for Tailwind to accompany the site?
  - utkarshkukreti 7y ago
    Adam Wathan (creator of Tailwind CSS) is working on an excellent screencast series about using Tailwind: https://tailwindcss.com/screencasts https://tailwindcss.com/screencasts. I highly recommend watching it.
- vcavallo 7y ago
  I love when in-browser editors support vim keybindings :) thanks!
  - utkarshkukreti 7y ago
    I _had_ to add it -- I can't write code without vim keybindings!
adriansky 7y ago
This is awesome! I started using Tailwind for a project. I was a concern with the relatively big size of the framework on a landing page[1]. Then I used purgeCss to only leave the css classes that I used and remove all others. That solved the size issue. [1] https://uxeranalytics.com/ https://uxeranalytics.com/
- Tomte 7y ago
  Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?
  - dpacmittal 7y ago
    Why not nodejs? Just curious
    - Tomte 7y ago
      Because it's yet another full ecosystem with lots of dependencies where I have zero knowledge and experience. For example, all those packages say "npm install packagename" to install, but it didn't work for me. It seems I have to (sometimes?) do a "npm init" first. No install instructions ever tell you that. I'm sure when you're in the ecosystem, that's a given. For me it's hurdle after hurdle. That's why I named Go and Ruby as examples. The former because you usually get a standalone executable, the latter because I already have that toolchain installed, and I know how to navigate it. Unfortunately, everything in webdev is now node.js. Just look at any CSS framework docs (including Tailwinds, which I really like): it's an endless stream of pre-processors and post-processors, multiplied with all kinds of ES versions, Babel, yarn-or-npm, this build tool or that. It just doesn't end. Rant over. :-)
      - jazoom 7y ago
        I've been using NodeJS for about 5 years and have never seen the init usage you're talking about. `npm init` initialises your new project. At least I think that's the case, because I've never run that command. I just create a package.json file myself. Also, I use yarn instead of npm. But of course, because change, there is now a new way to use init that you just alerted me to. It sure seems like an unnecessary complication. I recommend using yarn, by the way.
tunedmystic 7y ago
Love it! I'm using Tailwindcss on a project now, and this tool will come in pretty handy!
whammywon 7y ago
Awesome! I haven't used Tailwind for any big projects (yet!) but I _have_ tinkered with it, and I really like it. Good work!
KevinNTH 7y ago
Awesome project. I am a big fan of Tailwind CSS to and I use it for my current project [1]. I will definitely make use of Tailwind.run() to as a playground to design components! Great job! [1] https://gekri.com https://gekri.com
- lauritzsh 7y ago
  Your project is a bit similar to mine and I am very curious about how you use Blockstack. I have been hosting a CouchDB instance myself on a VPN but considered moving to Firebase while prototyping since it seems easier to use. Considering Firebase since it offers offline-first support. However, only today I was made aware of Blockstack and I have seen it mentioned multiple places. How do you like working with Blockstack and what made you choose it? Does your app work offline? Does it synchronize automatically between devices? I also want to take data privacy very seriously, since I am dealing with personal and sensitive data (just like a person's journal is very sensitive to them).
  - KevinNTH 7y ago
    Blockstack is very easy to get started with and provide user authentication and encrypted data storage out of the box. About offline-mode, I am about to implement it by my side as this feature is not part of the Blockstack SDK for now. I am happy that you are taking data privacy very seriously and I guess Blockstack is a good solution to go.
M4v3R 7y ago
It looks nice, but exported CSS is 880 kB unminified (670 kB minified). Yikes. Is there a way to strip out unused portions of it?
- daniels76 7y ago
  You can use PurgeCSS to remove all the unused CSS and that's what Adam Wathan recommends as well I believe
- cygned 7y ago
  Yes you can use a configuration file to build it (we integrated it into webpack). The config allows to disable features completely or only include certain versions of them (hover, responsive, focus, ...)
- vcavallo 7y ago
  you can use PurgeCSS on your own, i suppose?
- oskarp 7y ago
  See https://tailwindcss.com/docs/controlling-file-size/ https://tailwindcss.com/docs/controlling-file-size/
dlbucci 7y ago
Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don't use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? Does anyone have experience with both (or some other micro class framework) who can tell me how they compare? [1] https://acss.io/ https://acss.io/
- thijsvandien 7y ago
  I have no experience with Atomic CSS, but I think an important part of Tailwind is that it simultaneously serves as a design system. By having relatively limited options for, let's say, font sizes, you don't spend a lot of time making micro adjustments. The author of Tailwind also co-authored the Refactoring UI book that pretty much explains this philosophy that the framework was built to support. Of course, in the end you can add as much custom CSS as you want, written as utilities or not, but the point is to quickly get to a reasonable design.
  - dmix 7y ago
    You have to strike a balance between reusability + a central base of the design/theme which defines the consistent look and feel on one hand with the composable LEGO style building blocks which Basscss https://basscss.com/ https://basscss.com/ and Tachyons http://tachyons.io/ http://tachyons.io/ and other similar functional css frameworks made popular. The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change. Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ https://rebassjs.org/ where customization of base values is handled with CSS in JS. The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/ https://www.purgecss.com/ Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.
bbmario 7y ago
I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!
- yoz-y 7y ago
  Yeah at a first glance this looks like putting style in html except by using classes rather than `style` attribute. Cool for prototyping I guess.
  - antonkm 7y ago
    I've found that since using Tailwind I've got a deeper understanding of CSS, got a greater understanding of UI design (Adam Wathan's tutorials are great) and produce and replicate designs quicker and easier. It's a design system with constraints, which automatically gives me fewer and better options. Using something like Bootstrap is probably easier and quicker if you're unfamiliar with writing CSS though. All in all, quite far from styling with inline `style` (but it takes a bit of learning on the thought process behind it).
    - yoz-y 7y ago
      Could you elaborate a bit more? I understand how something like this would help with understanding UI design as it abstracts away the unnecessary details of CSS. However without digging into what these classes actually do I don't understand how it helps with understanding of the actual CSS.
- skrebbel 7y ago
  > create more than one theme for the same HTML! Who does this? It sounds like an exercise in pain and futility.
  - have_faith 7y ago
    Imagine it more from the perspective of a component altering it's style based on some sort of global "state". That global state could simply be a class on the body like "page-contact", so your css can alter itself much easier if the style isn't defined up front in a list of prescriptive class names. It's less theming in the sense of css zen garden and more encoding variations of style in css instead of relying on more class names.
foobar_ 7y ago
Tailwind is quite nice for raw prototyping. I'm still not how it compares to basscss. I would love a pure scss version of tailwind.
woile 7y ago
Wow, this is awesome, I have always felt comfortable using css utilities like px-2, text-center, or border-0, this goes next level, super interesting.
Etheryte 7y ago
While semantic styling has been around for quite a while in different shapes and forms, this is essentially the same as inlining all of your styles in a style attribute on every element, albeit just a bit shorter to write. It's an interesting idea to entertain as a thought, and some utility classes certainly hold value in general, but I don't see how you would ever reasonably want to use this in a project. It has all the same drawbacks as writing inline styles on elements, not to mention the large size. Say you have a number of views and decide (or a client decides) you want all of the buttons to have a bit more padding. If anything else happens to completely accidentally also use the same padding class you're always left with manually checking every single instance just for a small change like this.
- cuddlecake 7y ago
  TailwindCSS can be abused to resemble inline styles, but part of TailwindCSS is the fact that you have some sort of design system you can quickly set up and build upon. For example, I could define a color called "primary" and use it anywhere without caring what the actual color is. Furthermore, styled buttons are such a common occurrence that TailwindCSS encourages users to extract common CSS patterns into component classes[0]. 0: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
  - wishinghand 7y ago
    Extracting components? You mean like writing CSS classes? I'm so glad Tailwind is here to reinvent the wheel for us.
    - cuddlecake 7y ago
      Well, you do write CSS classes, but those classes are based on your configuration. This is not a reinvention, it's a framework addressing certain issues in a certain way. It might seem counterintuitive at first, but to me it's a tool. I prefer it over SCSS (since I often rebuild in SCSS what TailwindCSS provides)
- thijsvandien 7y ago
dinkleberg 7y ago
I'm absolutely loving using Tailwind for my new projects. It makes it so easy to prototype and build out nice designs. Honestly I have never felt so productive when it comes to designing pages. There is however one thing that prevents me from using it for everything and I'm curious if anyone knows a solution for this. If I am pulling a chunk of rich text from a CMS/backend/whatever, how can I style this? I tend to use Django for my backend, so in my template files I just put in a chunk like <div class="container">{{ body }}</div>. If that chunk has h2,p, etc. none of those are getting styled. In normal css I could just define what those h2, p, etc look like under a specific class. But besides using some js magic to inject those classes, I'm at a loss.
- jasim 7y ago
  There is no good way to solve it using Tailwind classes alone. You could parse the markup first and add Tailwind classes before rendering them, but that is too much pain for very little reward. The best trade-off I've found is to give a unique CSS classname for the container which has user-generated content, and then style it using nested selectors. Here you can use Tailwind's @apply so you're still able to rely on Tailwind's design system.
  - dinkleberg 7y ago
    Yeah I definitely considered the parsing method, but that is definitely too much work there. I didn't consider using the @apply, good idea. I'll have to give that a go, thanks!
- yagodragon 7y ago
  Do you have any tutorial on how to set up Django with tailwindcss (using Django templates)? I'm new to Django and somewhat confused when it comes to integrating modern front end tools.
  - dinkleberg 7y ago
    Yeah so someone actually made a Django app for it: https://github.com/timonweb/django-tailwind https://github.com/timonweb/django-tailwind I've used it and it is easy to use. It will generate a base.html file for you which pulls the built css from the static directory and you can extend that in your templates.
peternicky 7y ago
I played around with tailwind on a small project and found it more difficult than I expected. I think part of the problem is that when using tailwind or other similar frameworks, the conceptual model and workflow is different and requires some cognitive overhead to use effectively and efficiently. Perhaps one day I will try again but personally I want to minimize extra stuff to learn, especially related to css and styling.
GaryNumanVevo 7y ago
I recently tried learning Tachyons, I couldn't get the hang of it, until I was on the train with no internet and I only had an example blog site loaded, and the table of styles. I was able to put together my new website theme in an hour.
spectramax 7y ago
CSS has one major drawback - that is, there is no way to compose more complex objects from basic ones. Say, I have a class: foo { color: #FF0000; } I want to now apply this class to another class: bar(foo) { background-color: #000000; } I want to be able to inherit from foo, but I can't do that and that's why we have these shenanigans of composable UI frameworks... there are some advantages to doing everything in the HTML but now we have repeating patterns in the HTML, such as in the OP's link <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Tutorials</a> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Plugins</a> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Features</a> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Blog</a> which is not extensible and creates duplicate code. You'd still have duplicate class names but I just have to change it once in the css instead of N different places in HTML.
- cuddlecake 7y ago
  TailwindCSS does have that: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
- deleted 7y ago
  [deleted]
cygned 7y ago
The major selling point from my point of view, and the reason why I switched from Tachyons, are components. With that, one can easily compose styles. .btn { @apply cursor-pointer bg-blue border-blue-darker text-white; } When developing a web app, this allows you to have a central style configuration and reusability.
recursive 7y ago
I can't tell from this what Tailwind actually is, or how to use it.
- icxa 7y ago
  "A utility-first CSS framework for rapidly building custom designs." It's an excellent description in of it's own, but if I were to attempt to put it in other terms, it allows you to compose css components and classes out of other smaller, essentially one liner css classes, while maintaining a consistent styling and spacing across the different utilities, which you define up front using the config but also comes with good defaults out of the box. It is excellent and now my preferred method for hacking up a new site. It also helps you think about your design system overall so now I find myself paying attention to things up front I would normally wouldn't and it ends up saving me time in the long run. It also pairs really well with the excellent Refactoring UI book.
meerita 7y ago
Taiwind is nice. For those interested in Functional CSS, I've made a Scss/Sass framework too, with different approach. https://github.com/meerita/utilcss https://github.com/meerita/utilcss here is the article related http://minid.net/2019/04/07/the-css-utilitarian-methodology/ http://minid.net/2019/04/07/the-css-utilitarian-methodology/ Once you start using funcional CSS, you don't want to go back.
- holler 7y ago
  > We have been programming CSS for a long time wrong. Have we though? I firmly disagree with the premise. I agree that like anything else, css can be abused and misused, and the example cited of Newspapers fits the narrative perfectly. I've worked at a major regional Newspaper in the past and their website was one of the worst sites I've seen. The lead developer at that time (10 years ago) switched to using a functional/semantic css pattern much like tailwind/UCSS, and I found it to be terrible. Any experienced FE developer should and will know css, whereas they will not know some random css framework dsl, nor should they have to learn it. Most modern js frameworks are moving towards web-components and scope css to a component, which eliminates much of the past structural ambiguity and reasons for seeing e.g. !important (if implemented properly). The argument about file size is not strong imo. You are trading css file size for html file size. How many modern web apps are slow due to their css file size? I doubt many. The Newspaper websites were always slow due to churn & many people touching the code, often with lower experience, leading to spaghetti. If it works for a team then more power to them, but I'm sticking with css :)
  - meerita 7y ago
    Hi, yes, the premise is a bit sensationalist. But any FE experienced will not work for too long on the projects. The projects I've surveyed and work for, changed personnel all the time. I didn't choose the projects to fit my narrative, I did it because most projects die within 5-10 years. Few projects live longer than that, and newspapers are great example for the research. The codebase is really hard to maintain as business grows. That's why I firmly believe, it is not the developer, it's the metodologies they use: they force you to do technical debt, bad arquitectures, etc. Of course functional CSS is not the solution to all, there are situations where, componetize everything will make more sense. But the more you work on, the more useful you see it becomes. The file size is strong for one reason: most connections to CSS resources are blocked by the queue of priorities, HTML files are downloaded between 12ms-100ms range and that means it's already done, plus, if you use reactive HTML, things speed up even more. Most of the CSS made with BEM or other metodologies don't end up with that much HTML saving too, they're quite verbose. You cannot control the verbosity since it's human made. With UCSS or other funcional frameworks, you can control the verbosity of the outputs, etc.
keb_ 7y ago
Awesome, might just give Tailwind a shot finally. Thanks for the great work. I typically use https://basscss.com/ https://basscss.com/, but been meaning to checkout larger Atomic CSS frameworks like Tailwind and Tachyons. Aside from the benefits of "functional CSS" that others have mentioned, one thing I really love about it is I don't have to constantly be looking up CSS rules or properties; I just reference the docs of whatever framework I'm using to get what I want. You might say I could do this with Bootstrap as well -- and yeah, I can, but I much prefer the piece-meal approach of atomic CSS. The times I've used Bootstrap, I found myself fighting their styles constantly, or giving up and resulting with a site that looks like every other Bootstrap page.
blorenz 7y ago
Very nice! I'm hoping that this can be a catalog and discovery tool in the future where we can showcase Tailwind components. Looking forward to it!
thrownaway954 7y ago
That are some bloated classes. it's no different in inline styling everything to me. I really don't see the benefit in doing it this way. Can you use tailwinds and scss to create actual styling rules? No that is something I could get behind.
smnplk 7y ago
Do i need to be an expert in CSS first to use this ?
sideproject 7y ago
Been really productive using Tailwind myself. Recently re-launched my SideProjectors site (https://www.sideprojectors.com https://www.sideprojectors.com) and was able to get my CSS developed very fast. I have most of Tailwind classes in my head now, so I hardly look up their site for references. Being able to quickly edit the UI without much thinking is very refreshing.

Hey everyone! I tweeted a video of the app in action here: https://twitter.com/utkarshkukreti/status/1158323716515778560 https://twitter.com/utkarshkukreti/status/115832371651577856... I made this TailwindCSS Playground over the last two weeks. I really like the core idea of Tailwind and the productivity gains it gives and would like to build more stuff with it in the future! Features: * Compile custom @tailwindcss config and CSS in the browser * Live preview in 5 screen sizes * Class name autocompletion with CSS definition preview * Save code online or export .zip * Vim/Emacs/Sublime key bindings + Emmet

Numberwang 7y ago
It looks great. Do you know of any good tutorials for Tailwind to accompany the site?
- utkarshkukreti 7y ago
  Adam Wathan (creator of Tailwind CSS) is working on an excellent screencast series about using Tailwind: https://tailwindcss.com/screencasts https://tailwindcss.com/screencasts. I highly recommend watching it.
vcavallo 7y ago
I love when in-browser editors support vim keybindings :) thanks!
- utkarshkukreti 7y ago
  I _had_ to add it -- I can't write code without vim keybindings!

adriansky 7y ago

This is awesome! I started using Tailwind for a project. I was a concern with the relatively big size of the framework on a landing page[1]. Then I used purgeCss to only leave the css classes that I used and remove all others. That solved the size issue. [1] https://uxeranalytics.com/ https://uxeranalytics.com/

Tomte 7y ago
Is there any purgecss equivalent, that is a local tool and is not node.js? I've recently searched for that and only found a defunct Ruby gem. Does the Golang world have nothing like that?
- dpacmittal 7y ago
  Why not nodejs? Just curious
  - Tomte 7y ago
    Because it's yet another full ecosystem with lots of dependencies where I have zero knowledge and experience. For example, all those packages say "npm install packagename" to install, but it didn't work for me. It seems I have to (sometimes?) do a "npm init" first. No install instructions ever tell you that. I'm sure when you're in the ecosystem, that's a given. For me it's hurdle after hurdle. That's why I named Go and Ruby as examples. The former because you usually get a standalone executable, the latter because I already have that toolchain installed, and I know how to navigate it. Unfortunately, everything in webdev is now node.js. Just look at any CSS framework docs (including Tailwinds, which I really like): it's an endless stream of pre-processors and post-processors, multiplied with all kinds of ES versions, Babel, yarn-or-npm, this build tool or that. It just doesn't end. Rant over. :-)
    - jazoom 7y ago
      I've been using NodeJS for about 5 years and have never seen the init usage you're talking about. `npm init` initialises your new project. At least I think that's the case, because I've never run that command. I just create a package.json file myself. Also, I use yarn instead of npm. But of course, because change, there is now a new way to use init that you just alerted me to. It sure seems like an unnecessary complication. I recommend using yarn, by the way.

tunedmystic 7y ago

Love it! I'm using Tailwindcss on a project now, and this tool will come in pretty handy!

whammywon 7y ago

Awesome! I haven't used Tailwind for any big projects (yet!) but I _have_ tinkered with it, and I really like it. Good work!

KevinNTH 7y ago

Awesome project. I am a big fan of Tailwind CSS to and I use it for my current project [1]. I will definitely make use of Tailwind.run() to as a playground to design components! Great job! [1] https://gekri.com https://gekri.com

lauritzsh 7y ago
Your project is a bit similar to mine and I am very curious about how you use Blockstack. I have been hosting a CouchDB instance myself on a VPN but considered moving to Firebase while prototyping since it seems easier to use. Considering Firebase since it offers offline-first support. However, only today I was made aware of Blockstack and I have seen it mentioned multiple places. How do you like working with Blockstack and what made you choose it? Does your app work offline? Does it synchronize automatically between devices? I also want to take data privacy very seriously, since I am dealing with personal and sensitive data (just like a person's journal is very sensitive to them).
- KevinNTH 7y ago
  Blockstack is very easy to get started with and provide user authentication and encrypted data storage out of the box. About offline-mode, I am about to implement it by my side as this feature is not part of the Blockstack SDK for now. I am happy that you are taking data privacy very seriously and I guess Blockstack is a good solution to go.

M4v3R 7y ago

It looks nice, but exported CSS is 880 kB unminified (670 kB minified). Yikes. Is there a way to strip out unused portions of it?

daniels76 7y ago
You can use PurgeCSS to remove all the unused CSS and that's what Adam Wathan recommends as well I believe
cygned 7y ago
Yes you can use a configuration file to build it (we integrated it into webpack). The config allows to disable features completely or only include certain versions of them (hover, responsive, focus, ...)
vcavallo 7y ago
you can use PurgeCSS on your own, i suppose?
oskarp 7y ago
See https://tailwindcss.com/docs/controlling-file-size/ https://tailwindcss.com/docs/controlling-file-size/

dlbucci 7y ago

Cool! I've been wanting to try a framework like Tailwind, but I get the feeling I'd like something like Atomic CSS [1] better. It generates classes based on what you use, as opposed to Tailwind, which supplies thousands of classes that you may need and leaves it up to you to strip out the ones you don't use (I think?). I dunno, it just seems like Tailwind has it backwards to me, but am I misunderstanding something? Does anyone have experience with both (or some other micro class framework) who can tell me how they compare? [1] https://acss.io/ https://acss.io/

thijsvandien 7y ago
I have no experience with Atomic CSS, but I think an important part of Tailwind is that it simultaneously serves as a design system. By having relatively limited options for, let's say, font sizes, you don't spend a lot of time making micro adjustments. The author of Tailwind also co-authored the Refactoring UI book that pretty much explains this philosophy that the framework was built to support. Of course, in the end you can add as much custom CSS as you want, written as utilities or not, but the point is to quickly get to a reasonable design.
- dmix 7y ago
  You have to strike a balance between reusability + a central base of the design/theme which defines the consistent look and feel on one hand with the composable LEGO style building blocks which Basscss https://basscss.com/ https://basscss.com/ and Tachyons http://tachyons.io/ http://tachyons.io/ and other similar functional css frameworks made popular. The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change. Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ https://rebassjs.org/ where customization of base values is handled with CSS in JS. The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/ https://www.purgecss.com/ Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.

bbmario 7y ago

I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!

yoz-y 7y ago
Yeah at a first glance this looks like putting style in html except by using classes rather than `style` attribute. Cool for prototyping I guess.
- antonkm 7y ago
  I've found that since using Tailwind I've got a deeper understanding of CSS, got a greater understanding of UI design (Adam Wathan's tutorials are great) and produce and replicate designs quicker and easier. It's a design system with constraints, which automatically gives me fewer and better options. Using something like Bootstrap is probably easier and quicker if you're unfamiliar with writing CSS though. All in all, quite far from styling with inline `style` (but it takes a bit of learning on the thought process behind it).
  - yoz-y 7y ago
    Could you elaborate a bit more? I understand how something like this would help with understanding UI design as it abstracts away the unnecessary details of CSS. However without digging into what these classes actually do I don't understand how it helps with understanding of the actual CSS.
skrebbel 7y ago
> create more than one theme for the same HTML! Who does this? It sounds like an exercise in pain and futility.
- have_faith 7y ago
  Imagine it more from the perspective of a component altering it's style based on some sort of global "state". That global state could simply be a class on the body like "page-contact", so your css can alter itself much easier if the style isn't defined up front in a list of prescriptive class names. It's less theming in the sense of css zen garden and more encoding variations of style in css instead of relying on more class names.

foobar_ 7y ago

Tailwind is quite nice for raw prototyping. I'm still not how it compares to basscss. I would love a pure scss version of tailwind.

woile 7y ago

Wow, this is awesome, I have always felt comfortable using css utilities like px-2, text-center, or border-0, this goes next level, super interesting.

Etheryte 7y ago

While semantic styling has been around for quite a while in different shapes and forms, this is essentially the same as inlining all of your styles in a style attribute on every element, albeit just a bit shorter to write. It's an interesting idea to entertain as a thought, and some utility classes certainly hold value in general, but I don't see how you would ever reasonably want to use this in a project. It has all the same drawbacks as writing inline styles on elements, not to mention the large size. Say you have a number of views and decide (or a client decides) you want all of the buttons to have a bit more padding. If anything else happens to completely accidentally also use the same padding class you're always left with manually checking every single instance just for a small change like this.

cuddlecake 7y ago
TailwindCSS can be abused to resemble inline styles, but part of TailwindCSS is the fact that you have some sort of design system you can quickly set up and build upon. For example, I could define a color called "primary" and use it anywhere without caring what the actual color is. Furthermore, styled buttons are such a common occurrence that TailwindCSS encourages users to extract common CSS patterns into component classes[0]. 0: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
- wishinghand 7y ago
  Extracting components? You mean like writing CSS classes? I'm so glad Tailwind is here to reinvent the wheel for us.
  - cuddlecake 7y ago
    Well, you do write CSS classes, but those classes are based on your configuration. This is not a reinvention, it's a framework addressing certain issues in a certain way. It might seem counterintuitive at first, but to me it's a tool. I prefer it over SCSS (since I often rebuild in SCSS what TailwindCSS provides)
thijsvandien 7y ago

dinkleberg 7y ago

I'm absolutely loving using Tailwind for my new projects. It makes it so easy to prototype and build out nice designs. Honestly I have never felt so productive when it comes to designing pages. There is however one thing that prevents me from using it for everything and I'm curious if anyone knows a solution for this. If I am pulling a chunk of rich text from a CMS/backend/whatever, how can I style this? I tend to use Django for my backend, so in my template files I just put in a chunk like <div class="container">{{ body }}</div>. If that chunk has h2,p, etc. none of those are getting styled. In normal css I could just define what those h2, p, etc look like under a specific class. But besides using some js magic to inject those classes, I'm at a loss.

jasim 7y ago
There is no good way to solve it using Tailwind classes alone. You could parse the markup first and add Tailwind classes before rendering them, but that is too much pain for very little reward. The best trade-off I've found is to give a unique CSS classname for the container which has user-generated content, and then style it using nested selectors. Here you can use Tailwind's @apply so you're still able to rely on Tailwind's design system.
- dinkleberg 7y ago
  Yeah I definitely considered the parsing method, but that is definitely too much work there. I didn't consider using the @apply, good idea. I'll have to give that a go, thanks!
yagodragon 7y ago
Do you have any tutorial on how to set up Django with tailwindcss (using Django templates)? I'm new to Django and somewhat confused when it comes to integrating modern front end tools.
- dinkleberg 7y ago
  Yeah so someone actually made a Django app for it: https://github.com/timonweb/django-tailwind https://github.com/timonweb/django-tailwind I've used it and it is easy to use. It will generate a base.html file for you which pulls the built css from the static directory and you can extend that in your templates.

peternicky 7y ago

I played around with tailwind on a small project and found it more difficult than I expected. I think part of the problem is that when using tailwind or other similar frameworks, the conceptual model and workflow is different and requires some cognitive overhead to use effectively and efficiently. Perhaps one day I will try again but personally I want to minimize extra stuff to learn, especially related to css and styling.

GaryNumanVevo 7y ago

I recently tried learning Tachyons, I couldn't get the hang of it, until I was on the train with no internet and I only had an example blog site loaded, and the table of styles. I was able to put together my new website theme in an hour.

spectramax 7y ago

CSS has one major drawback - that is, there is no way to compose more complex objects from basic ones. Say, I have a class: foo { color: #FF0000; } I want to now apply this class to another class: bar(foo) { background-color: #000000; } I want to be able to inherit from foo, but I can't do that and that's why we have these shenanigans of composable UI frameworks... there are some advantages to doing everything in the HTML but now we have repeating patterns in the HTML, such as in the OP's link <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Tutorials</a> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Plugins</a> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Features</a> <a class="px-4 py-2 border-b-2 hover:border-purple-500 hover:bg-purple-100">Blog</a> which is not extensible and creates duplicate code. You'd still have duplicate class names but I just have to change it once in the css instead of N different places in HTML.

cuddlecake 7y ago
TailwindCSS does have that: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
deleted 7y ago
[deleted]

cygned 7y ago

The major selling point from my point of view, and the reason why I switched from Tachyons, are components. With that, one can easily compose styles. .btn { @apply cursor-pointer bg-blue border-blue-darker text-white; } When developing a web app, this allows you to have a central style configuration and reusability.

recursive 7y ago

I can't tell from this what Tailwind actually is, or how to use it.

icxa 7y ago
"A utility-first CSS framework for rapidly building custom designs." It's an excellent description in of it's own, but if I were to attempt to put it in other terms, it allows you to compose css components and classes out of other smaller, essentially one liner css classes, while maintaining a consistent styling and spacing across the different utilities, which you define up front using the config but also comes with good defaults out of the box. It is excellent and now my preferred method for hacking up a new site. It also helps you think about your design system overall so now I find myself paying attention to things up front I would normally wouldn't and it ends up saving me time in the long run. It also pairs really well with the excellent Refactoring UI book.

meerita 7y ago

Taiwind is nice. For those interested in Functional CSS, I've made a Scss/Sass framework too, with different approach. https://github.com/meerita/utilcss https://github.com/meerita/utilcss here is the article related http://minid.net/2019/04/07/the-css-utilitarian-methodology/ http://minid.net/2019/04/07/the-css-utilitarian-methodology/ Once you start using funcional CSS, you don't want to go back.

holler 7y ago
> We have been programming CSS for a long time wrong. Have we though? I firmly disagree with the premise. I agree that like anything else, css can be abused and misused, and the example cited of Newspapers fits the narrative perfectly. I've worked at a major regional Newspaper in the past and their website was one of the worst sites I've seen. The lead developer at that time (10 years ago) switched to using a functional/semantic css pattern much like tailwind/UCSS, and I found it to be terrible. Any experienced FE developer should and will know css, whereas they will not know some random css framework dsl, nor should they have to learn it. Most modern js frameworks are moving towards web-components and scope css to a component, which eliminates much of the past structural ambiguity and reasons for seeing e.g. !important (if implemented properly). The argument about file size is not strong imo. You are trading css file size for html file size. How many modern web apps are slow due to their css file size? I doubt many. The Newspaper websites were always slow due to churn & many people touching the code, often with lower experience, leading to spaghetti. If it works for a team then more power to them, but I'm sticking with css :)
- meerita 7y ago
  Hi, yes, the premise is a bit sensationalist. But any FE experienced will not work for too long on the projects. The projects I've surveyed and work for, changed personnel all the time. I didn't choose the projects to fit my narrative, I did it because most projects die within 5-10 years. Few projects live longer than that, and newspapers are great example for the research. The codebase is really hard to maintain as business grows. That's why I firmly believe, it is not the developer, it's the metodologies they use: they force you to do technical debt, bad arquitectures, etc. Of course functional CSS is not the solution to all, there are situations where, componetize everything will make more sense. But the more you work on, the more useful you see it becomes. The file size is strong for one reason: most connections to CSS resources are blocked by the queue of priorities, HTML files are downloaded between 12ms-100ms range and that means it's already done, plus, if you use reactive HTML, things speed up even more. Most of the CSS made with BEM or other metodologies don't end up with that much HTML saving too, they're quite verbose. You cannot control the verbosity since it's human made. With UCSS or other funcional frameworks, you can control the verbosity of the outputs, etc.

keb_ 7y ago

Awesome, might just give Tailwind a shot finally. Thanks for the great work. I typically use https://basscss.com/ https://basscss.com/, but been meaning to checkout larger Atomic CSS frameworks like Tailwind and Tachyons. Aside from the benefits of "functional CSS" that others have mentioned, one thing I really love about it is I don't have to constantly be looking up CSS rules or properties; I just reference the docs of whatever framework I'm using to get what I want. You might say I could do this with Bootstrap as well -- and yeah, I can, but I much prefer the piece-meal approach of atomic CSS. The times I've used Bootstrap, I found myself fighting their styles constantly, or giving up and resulting with a site that looks like every other Bootstrap page.

blorenz 7y ago

Very nice! I'm hoping that this can be a catalog and discovery tool in the future where we can showcase Tailwind components. Looking forward to it!

thrownaway954 7y ago

That are some bloated classes. it's no different in inline styling everything to me. I really don't see the benefit in doing it this way. Can you use tailwinds and scss to create actual styling rules? No that is something I could get behind.

smnplk 7y ago

Do i need to be an expert in CSS first to use this ?

sideproject 7y ago

Been really productive using Tailwind myself. Recently re-launched my SideProjectors site (https://www.sideprojectors.com https://www.sideprojectors.com) and was able to get my CSS developed very fast. I have most of Tailwind classes in my head now, so I hardly look up their site for references. Being able to quickly edit the UI without much thinking is very refreshing.