Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

tailwind.run

Post reply on HN
Print view View original

91–97 of 97 posts

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

#91

Post by meerita »

ivanhoe wrote: post #88
meerita wrote: post #84

Earlier quoted context omitted.

Before I answer, do you want to change a particular module, particular text or you want to change site-wide things?

Let's for starter say that we need to change something site-wide?

Well, I assume is a component. Can be a layout or a partial, you go there, read the classes, make your changes according to the new design. In case you need extra clases, let's say, you need to introduce something like pointer-events, you go to the framework, you activate it in the config file, then use the class on the div. In case you need extra customization, you write a custom class ex. c-10 and you apply interactions needed (:hover, :focus, etc.).

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

#92

Post by bbmario »

jasim wrote: post #40
bbmario wrote: post #17

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!

Tailwind makes it very easy to change theme by changing just a single configuration file: https://tailwindcss.com/#designed-to-be-customized It is very liberating to use Tailwind instead of creating unique CSS classes for every div in a page. The code is much more maintainable - in a single stroke Tailwind gets rid of selector specificity issues, design inconsistency, and naming woes. From a programming perspective,…

I'm looking at the example: https://tailwindcss.com/docs/utility-first

So, if I'm making a theme, and I want a different color for the text, I have to replace "text-gray-900" with my hex code for purple?

Also, what if my theme is about making the design more compact, or increasing density? How do I customize thousands of elements with different combinations of class="ml-6 pt-1"?

Oh, and don't get me started on "bg-white rounded-lg". God forbid your theme wants squared boxes on black background.

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

#93

Post by bbmario »

skrebbel wrote: post #26
bbmario wrote: post #17

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!

> create more than one theme for the same HTML! Who does this? It sounds like an exercise in pain and futility.

Dark/white. Compact/expanded. Color variations. Palette variations. Ever heard of white label websites too?

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

#94

Post by yoz-y »

antonkm wrote: post #66
yoz-y wrote: post #25

Earlier quoted context omitted.

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.

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…

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.

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

#95

Post by mattferderer »

Etheryte wrote: post #90
adamwathan wrote: post #89

Earlier quoted context omitted.

Scoped styles and SCSS do not prevent you from having to come up with unnecessary names for things like utilities do. That's the main benefit in my opinion. Wasting brain cycles to name arbitrary wrapper divs that only exist to be a target for layout styles things like ".image-card-content-wrapper" is a completely unnecessary step in the UI development process. Using utility classes to build a UI is much more like bu…

Using SCSS and using some utility classes isn't in any way mutually exclusive. If anything, it's a lot easier to mix and match. The argument isn't against having utility classes/mixins/extensions in general, but against relying on them solely. I'm still not convinced — using only utility classes has very clear downsides, while using what's reasonably one of the most common approaches in the industry right now avoids…

I don't think you can "only use utility classes". I think they cover 90%+ of your CSS though. I apologize if that came across as the argument I was making.

Yes, you probably will need to create some custom classes from time to time. Ideally those might be done in a utility fashion though.

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

#96

Post by jasim »

bbmario wrote: post #92
jasim wrote: post #40

Earlier quoted context omitted.

Tailwind makes it very easy to change theme by changing just a single configuration file: https://tailwindcss.com/#designed-to-be-customized It is very liberating to use Tailwind instead of creating unique CSS classes for every div in a page. The code is much more maintainable - in a single stroke Tailwind gets rid of selector specificity issues, design inconsistency, and naming woes. From a programming perspective,…

I'm looking at the example: https://tailwindcss.com/docs/utility-first So, if I'm making a theme, and I want a different color for the text, I have to replace "text-gray-900" with my hex code for purple? Also, what if my theme is about making the design more compact, or increasing density? How do I customize thousands of elements with different combinations of class="ml-6 pt-1"? Oh, and don't get me started on "bg-wh…

Don't use `text-gray` if you're building an app that needs to be themed like that. Instead use `text-secondary` or a similar name that you'd otherwise use in a themeable system. Tailwind lets you define _every_ single design token in the system and comes with zero opinions there.

If you want to change density of the design, you can change the spacings centrally in the configuration itself. But if you need a non-proportional change, then it isn't any different than BEM+SASS environment where you'd have to go into every CSS class and make the change. I think it is even better than BEM here because you only need to change classnames in HTML, which is co-located with the style, and it doesn't cause cascading changes due to specificity etc.

To me the opinions you hold seem to come from not having tried it in good faith, which was how I used to judge functional CSS as well. If the current CSS style you use serves you well, that's fine you don't have to explore. But if you've wondered whether there is something wrong with the way we do CSS today, then Tailwind could be an eye-opener.

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

#97

Post by KevinNTH »

lauritzsh wrote: post #35
KevinNTH wrote: post #6

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

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 Blockst…

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.

Post reply on HN