TailwindCSS v2.0

Post by rglullis » Thu, Nov 19, 2020, 11:04 PM UTC

roryokane wrote: post #439

rglullis wrote: post #436

Earlier quoted context omitted.

That is interesting. But what do you/does him mean by "create a mini-component"? Are we talking about a React component, a Vue one, none of that?

They mean a normal component in React, Vue, Angular, or whatever other front-end technology you are already working with. I think they’re calling it a “micro-component” just to emphasize that there is no logic in the component beyond the templating.

   
     
   

   
     export default {
       name: "my-button"
    }
   

   
   @use "my/sass/variables"
   @use "my/sass/mixins/buttons"

   button {
     @include buttons.rounded($variables.radius-button-small)
     @include buttons.colors($active: $variables.primary, $background: $variables.primary-accent, $disabled: $variables.disabled)
   }
   

  
  
    
Welcome to the beautiful site
    Sign up now!
  
  

  
  import MyButton from './my-button.js'

  export default {
    name: "hero",
    components: {MyButton}
  }
  

  
  @use "my/sass/variables"

  div.hero {
    button {
      width: $variables.size-button-large-width;
      height: $variables.size-button-large-height;
    }
  }
  

Post by rglullis » Thu, Nov 19, 2020, 11:44 PM UTC

manigandham wrote: post #441

rglullis wrote: post #402

Earlier quoted context omitted.

> why not just condense into typing the style as a class name in the HTML? Because the style may change, but the underlying data won't. I know that nowadays everyone default architecture is to have data coming from some json API and that will have to be processed and rendered in the client anyway - but it is not just because something is the common case that it is the only case. By looking at the discussions, I am st…

> "Because the style may change, but the underlying data won't." What's the difference? It's the same typing, whether you create styles in CSS or just class names in the HTML. Designing the first time vs changing it later is the action. The rest of your comment seems to be ranting other issues. CSS can't be split, that's the point. It's been tried often but it just doesnt work in reality and is part of HTML which als…

Post by stanmancan » Fri, Nov 20, 2020, 3:42 AM UTC

pembrook wrote: post #360

stanmancan wrote: post #335

Earlier quoted context omitted.

It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.

It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2…

   .btn { @apply px-4 py-2 rounded } 

Post by joelellis » Fri, Nov 20, 2020, 12:37 PM UTC

withinrafael wrote: post #201

I use TailwindCSS for some personal projects, works great, no major complaints. But as a dev in the government sector, I'm disappointed in the way they just whimsically dump Internet Explorer 11 in their release notes [1], as if it's a minor thing / cool to hate on. In my bubble, there's no alternative right now. Switching to a more modern browser requires an enormous amount of agility throughout the pipeline that do…

Post by jaredcwhite » Fri, Nov 20, 2020, 5:47 PM UTC

rvense wrote: post #378

jaredcwhite wrote: post #127

Earlier quoted context omitted.

Everybody makes @apply out to be the eventual solution to HTML soup, and a project I'm on uses it heavily—BUT the problem is you're now completely locked into a single framework. You can't ditch Tailwind and still use @apply bg-blue-500. If you used regular CSS properties, design tokens via CSS variables, etc. it would be completely portable. I've switched entire sites from one CSS framework to another and it's chall…

Um. The Tailwind compiler produces a plain CSS stylesheet with all the classes you need and none of the ones you don't. You can just dig that out of your build (or wget it from production) and stick it where you normally stick your styles(..!).