6 ms·

This is a very nice step in making Tailwind more Bootstrap like (read beginner friendly). One common complaint about Tailwind is that it makes the HTML look ver

• joexuyi 5y ago
  so why not just use bootstrap? I'm new to web development, but I thought the whole point of TailwindCSS is that it is more customisable than Bootstrap.
  • hashedout 5y ago
    What if you as a beginner can start using Tailwind immediately with this library and can learn tailwind's utility classes at your own pace when you need to customize anything? I'm not sure about this path, but it might be good for a beginner.
    • thecryptodiver 5y ago
      Yeah, this seems more like the combo of ease of Bootstrap + the extendability of Tailwind.
  • volkandkaya 5y ago
    It is hard to breakout of Bootstrap defaults. Both libraries have pros and cons.
• supermatt 5y ago
  Thats exactly what this component library does: https://daisyui.com/components/button https://daisyui.com/components/button If you want to do in "raw" tailwind (i.e. without this component library), you can use layers to create your own component classes, e.g.: @layer components { .btn { @apply inline-block px-4 py-3 text-sm font-semibold text-center uppercase transition duration-200 ease-in-out rounded-md cursor-pointer; } .btn-primary { @apply text-white bg-indigo-500 hover:bg-indigo-600; } }
  • karlerss 5y ago
    If it's just one class per property, you could just type out the CSS. Using emmet in IDE is probably faster than finding the tailwind classes with autocomplete.
    • automatic6131 5y ago
      >If it's just one class per property, you could just type out the CSS. You can, but then it rarely happens that you want the CSS to be fixed in that way for all time: the brilliance of tailwind is that you get resposniveness just by adding a few more classes. You cannot do that with inline CSS.
      • FractalHQ 5y ago
        This is the one pro-tailwind argument I can agree with. Sometimes I’ll use their shorthand md: & sm: in @apply in place of media queries. The advantage is that they remain local to their relevant selectors. Makes me think- all I would really want is to be able to have multiple values in css. Maybe something like . .card { width: 5rem md: 10rem; } Snap… am I on to something?
        • Nullabillity 5y ago
          Sass/Scss let you nest media queries inside of selectors years ago.
    • FractalHQ 5y ago
      And the result is html and css that is easier to read later. I’m so fast with CSS that Tailwind inevitably slows me down as an app scales.
• hardwaresofton 5y ago
  I agree with the positive sentiment, but a cynical take might be that we've basically found our way back, traveling in a circular pattern. It looks like Tailwind and Tachyons are useful tools but they do have a sweet spot, and I've run into the annoyance of 20+ classes in my tiny projects as well. Descriptive Real changes to the landscape have been made along the way: - Flexbox and to a lesser extent grid are grokked by many - People are much more willing and able to use CSS variables - Shadow DOM encapsulation and other methods of isolating styles from one component to another are well explored - there's some stuff on the horizon where people are JITing here and there and writing custom compositors ("Houdini" and related tech) But I'm not sure there have been any large paradigm shifts in CSS over the last 10 years, and Tailwind no matter how successful it's been commercially and in the headspace of developers seems to have been largely a very useful somewhat passing obsession.
  • hashedout 5y ago
    I see this not as a replacement, but as a novice choice. As noted in the documentation, you can use tailwind classes to customize existing components but if you do not want to you can use it like bootstrap. Even for building a quick prototype which can be made to look good in future is a use case for this.
    • hardwaresofton 5y ago
      I want to note that I was talking about tailwind vs bootstrap and others in the abstract, less so about DaisyUI specifically. What lead me to make the comment was the discussion point that "btn btn-primary" was so much more useful than 20+ tailwind classes. I agreed (it's something I have come across as well), but It's clear that Daisy UI will get you up and running quickly and there are lots of similar projects out there that do things like this, but the meta discussion around whether we're going in circles or if we've actually moved forward and found a nice mix between what was the bootstrap style (1-2 classes that do all the work) and tailwind/tachyons (5-10+ classes that do the work). To make the discussion less meta -- is the future things like DaisyUI? Bootstrap like classes but with the outlet for overriding not being manual CSS but actually being tailwind-style classes? In the past it was Bootstrap + your special large class/baked in styles, but in the future maybe it's "btn btn-primary box-shadow" or whatever, clearly a middle point of sorts
• dmitriid 5y ago
  No. No. It's a link disguised as a button. Stop doing that.
  • runarberg 5y ago
    Why? A “create” button that takes you to a creation page is still a link to that page and should be a link. It looking like a button indicates an action that the user understands. It is accessible, semantically correct, and follows accepted design conventions. What is the problem?
    • dmitriid 5y ago
      > Why? Because there's an expected built-in behaviour to these elements. > It is accessible, semantically correct, and follows accepted design conventions. There's nothing accepted about disguising a link as a button. Especially when it literally does no action except, you know, linking to a different page. Though, of course, there are ambiguous situations, especially in the context of PWAs. But code examples are not an ambiguous situation.
      • bennyp101 5y ago
        I think that ship has sailed, I really don't think that average users expect a button to 'do something' (in the sense it submits a form or something). Going to a different page /is/ 'doing something' as far as users are concerned. Certainly not the internet of old where a form was a form, and a link was a link.
        • dmitriid 5y ago
          An average user has no idea what's going on in modern software anymore, to be honest. Nothing is what it seems and is redesigned every couple of months
          • runarberg 5y ago
            On the GitHub front page there is a sidebar with a second level heading for “Repositories”. Next to the heading there is a: <a class="btn btn-primary" href="/new"> New </a> Below the heading there is a list of repos which had a recent activity by you. Each list item has a link to an that repo. <a class="dashbord-underlined-link" href="/namespace/repo"> namespace/repo </a> There is a substantial difference between these two links. One takes you to a location, the other one starts a process which ends with an action. As a user you are not going to be clicking the “New” button everyday. Maybe once a month, maybe once a year. So you are likely not going to remember where it is from the last time you clicked it. If you don’t find it when you need it, you will get frustrated. It needs a lot of visual weight relative to the other links in this nav section. Giving the same weight as a button is a reasonable decision.
• rvense 5y ago
  With Tailwind, if you write out something like that more than once or twice, you're really supposed to bundle it together. Either as a plain CSS class, or a component in your framework of choice. I suppose a library of common elements is a good thing to have, but the reason I like Tailwind is that I can use the utilities at first and then easily gather them together as plain CSS classes as and when that makes sense to me.
  • hashedout 5y ago
    Yes, the way I use it is with Svelte. I've created a list of components in Svelte (buttons, links, dropdowns, tables, etc.) I think with how tailwind makes you html look (very full of classes), it is perfectly matched with a component based framework. That way you get the full tailwind experience without the tedious rewriting of components.
  • mikevm 5y ago
    But if you're going to hide away CSS inside a component, why not just use inline CSS? What does Tailwind add to this?
    • oefrha 5y ago
      Whenever I read a comment like this I feel like talking to someone who’s never used Tailwind nor written inline CSS. How do you write inline CSS for pseudo-classes like :hover, :focus, :disabled? Media queries for breakpoints and dark mode? Not to mention more advanced features like divide-, space-, group-hover:, etc.
    • rvense 5y ago
      1) A set of a classes with consistent names for scales, colours, etc. You're not working with hex codes or pixel values. It's a more writable and much more readable syntax than inline styles. 2) It has variants for hover, etc (e.g.: class="bg-black hover:bg-white"). AFAIK you can't do that with inline styles. 3) I find it plays nicely with a workflow where I start out not knowing exactly what I'm doing, which is almost all of the time. I can smash ahead and do things in the class="" of each tag, then as I notice that I'm repeating myself, I grab small chunks of the class list and put them in '@apply's in a CSS file. Bottom-up, liek. The class lists are just a lot more manageable than inline styles. They're copy-pastable and really easy to read when you get used to it, as long as the lists aren't too long.
• deleted 5y ago
  [deleted]