tribedopa.blogg.se - Change a single line font style with css

No, Utility Classes Aren’t the Same As Inline Styles by Sarah Dayan of Algolia.Building a Scalable CSS Architecture by Sarah Dayan of Algolia.By The Numbers: A Year and a Half with Atomic CSS by John Polacek.If you’d like to hear about others’ experiences with this approach, check out the following resources: Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success. Īside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. This is easily solved by extracting components and partials, and using editor and language features like multi-cursor editing and simple loops. The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes: Inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes. You can’t use media queries in inline styles, but you can use Tailwind’s responsive utilities to build fully responsive interfaces easily. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs. Using inline styles, every value is a magic number. Ī common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is - you’re applying styles directly to elements instead of assigning them a class name and then styling that class.īut using utility classes has a few important advantages over inline styles: When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture. Classes in your HTML are local, so you can change them without worrying about something else breaking.

CSS is global and you never know what you’re breaking when you make a change. With utilities, everything is reusable so you rarely need to write new CSS. Using a traditional approach, your CSS files get bigger every time you add a new feature. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.

You aren’t wasting energy inventing class names.

In fact it’s just about impossible to think this is a good idea the first time you see it - you have to actually try it.īut once you’ve actually built something this way, you’ll quickly notice some really important benefits: Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. This approach allows us to implement a completely custom component design without writing a single line of custom CSS.

The font size, text color, and font-weight utilities ( text-xl, text-black, font-medium, etc.) to style the card text.The space-between utilities ( space-x-4) to handle the spacing between the logo and the text.The width and height utilities ( w-12 and h-12) to size the logo image.The background color, border radius, and box-shadow utilities ( bg-white, rounded-xl, and shadow-lg) to style the card’s appearance.The max-width and margin utilities ( max-w-sm and mx-auto) to constrain the card width and center it horizontally.Tailwind’s flexbox and padding utilities ( flex, shrink-0, and p-6) to control the overall card layout.With Tailwind, you style elements by applying pre-existing classes directly in your HTML.