--- title: Best CSS posts — May 2021 | daily.dev description: The most upvoted CSS posts from May 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/css/best-of/2021/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/css/best-of/2021/05 og:type: website og:site_name: daily.dev og:title: Best CSS posts — May 2021 | daily.dev og:description: The most upvoted CSS posts from May 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS — May 2021 1. 1 [](/posts/daisyui-free-ui-components-plugin-for-tailwind-css--4opgw0te "DaisyUI — Free UI components plugin for Tailwind CSS") Article Product Hunt · 5y DaisyUI — Free UI components plugin for Tailwind CSS DaisyUI is a plugin for Tailwind CSS - Beautiful CSS component - Clean HTML with component classes. Customizable and themeable - Only 2KB. No JS, No dependencies - Free! Embed it in your site and use it to share your content with the world. 48 6 2. 2 [](/posts/5-css-practices-to-avoid-as-a-web-developer-bsj6gzegz "5 CSS Practices To Avoid as a Web Developer") Article Better Programming · 5y 5 CSS Practices To Avoid as a Web Developer Some people think that CSS is difficult to learn. I feel sad about this since I don’t think so. After some thought about what can be done, I’ve come up with five developer habits that I don't like and will show you how to avoid them. 47 2 3. 3 [](/posts/css-is-pph2l7ml "CSS :is") Article David Walsh · 5y CSS :is CSS :is ; a method of avoid duplication within your selector structure. Many developers who hate CSS don't get it or don't want to get it. This is where :is comes to the rescue: a way to avoid repeating selectors in your CSS files. For more information, visit: css-is.org. 27 4 4. 4 [](/posts/tailwind-css-from-zero-to-hero---the-utility-first-workflow-qlvk2y9ei "Tailwind CSS from Zero to Hero - The Utility-First Workflow") Article daily.dev · 5y Tailwind CSS from Zero to Hero - The Utility-First Workflow Part two of the Tailwind CSS from Zero to Hero series. This time we will focus more on the entire workflow with utility classes. With these, you style elements by applying pre-existing classes directly in your HTML. With Tailwind’s utility classes, you use neither predefined rules, nor pure CSS. 25 6 5. 5 [](/posts/json-in-css-1t5ul1mhk "JSON in CSS") Article CSS-Tricks · 5y JSON in CSS Jonathan Neal tweeted a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. I re-typed his example here: grotesquely, CodePen Embed Fallback is not useful. Chucking some JSON in CSS I would think is another way around CORS. I kinda doubt it will catch on, but it's possible. 24 1 6. 6 [](/posts/next-gen-css-container--rk7nbdtj "Next Gen CSS: @container") Article CSS-Tricks · 5y Next Gen CSS: @container Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec. @container brings us the ability to style elements based on the size of their parent container. The @container API is not stable, and is subject to syntax changes. If you try it out on your own, you may encounter a few bugs. 22 3 7. 7 [](/posts/image-gallery-with-react-and-tailwind-css-upp5n2bd8 "Image Gallery with React and Tailwind CSS") Article Medium · 5y Image Gallery with React and Tailwind CSS In this post we will build a Image Gallery with ReactJS app with Tailwind CSS. We are also going to use Pixabay API to get the images. So, open your terminal and create a new ReactJS application by using the command below. Now, as per the instructions, change to the newly created folder. 19 1 8. 8 [](/posts/tailwind-figma-figma-ui-kit-built-for-integration-with-tailwind-css-raoawhlco "Tailwind Figma — Figma UI kit built for integration with Tailwind CSS") Article Product Hunt · 5y Tailwind Figma — Figma UI kit built for integration with Tailwind CSS Tailwind CSS Embed Collect is a new way to integrate with live websites. Tailwind Embed can be used to build UI interfaces and simplify the process of integrating into live websites with Tailwind CSS. Use Tailwind's Embed tool to build and collect CSS for your live website. 19 9. 9 [](/posts/a-new-way-to-reduce-font-loading-impact-css-font-descriptors-op38kycah "A New Way To Reduce Font Loading Impact: CSS Font Descriptors") Article Smashing Magazine · 5y A New Way To Reduce Font Loading Impact: CSS Font Descriptors Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts. Meet Smashing Online Workshops on front-end & UX. 18 10. 10 [](/posts/how-to-create-a-sticky-footer-in-css-0coi1tany "How to Create a Sticky Footer in CSS") Article JavaScript in Plain English · 5y How to Create a Sticky Footer in CSS Easy trick to design one of the key elements of a webpage. Use it to build your footers and make sure they stay at the same position even when you are scrolling up or down. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. 18 11. 11 [](/posts/css-fundamentals-and-cheat-sheet---4kevuq6v "CSS fundamentals and cheat sheet.") Article Hashnode · 5y CSS fundamentals and cheat sheet. selectors are ways of grabbing and manipulating HTML. Different selectors have different application. Flexbox stands for flexible box and is an alternative to using inline display. The box model is the most commonly used way to position items. The border is the divider between padding and the margin. 17 1 12. 12 [](/posts/a-love-letter-to-html-css--vqw5ihw0 "A Love Letter to HTML & CSS") Article CSS-Tricks · 5y A Love Letter to HTML & CSS Ashley Kolodziej writes to HTML and CSS to thank them for their contributions to the web. He says HTML is the foundation of the Internet and is the bridge between humans and information. HTML is an art in rendering and specificity and predicting when and where other systems or designers might want to override something. 17 13. 13 [](/posts/creating-colorful-smart-shadows-suyovyca2 "Creating Colorful, Smart Shadows") Article CSS-Tricks · 5y Creating Colorful, Smart Shadows Creating Colorful, Smart Shadows by kirupa | filed under UI Stuff. Read or watch below to find out how to create this effect. In the next few sections, what we are going to create is the following example: A picture of sushi with a colorful shadow appearing behind. 17 14. 14 [](/posts/how-to-create-neon-text-with-css-lhcmj5enr "How to Create Neon Text With CSS") Article CSS-Tricks · 5y How to Create Neon Text With CSS Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. In this article, we’re going to take a look at how to add glowing effects to text. We’ll also look at various ways to animate the neon signs. 15 15. 15 [](/posts/advanced-css-animation-using-cubic-bezier--hgbjbyhcy "Advanced CSS Animation Using cubic-bezier()") Article CSS-Tricks · 5y Advanced CSS Animation Using cubic-bezier() When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks that might help make things easier, while staying in vanilla CSS. Timing functions are more widely used and familiar but the second one is less common. There’s one especially neat timing function that gives us total control to create custom timing functions. In this post I will show you the power of it and how it can be used to create fancy animation without too much complexity. 14 16. 16 [](/posts/best-techniques-for-client-side-optimization-the-high-performance-series-hrr3qjwma "Best Techniques for Client-Side Optimization: The High-Performance Series") Article JavaScript in Plain English · 5y Best Techniques for Client-Side Optimization: The High-Performance Series 80%-90% of the end-user response time is spent on the frontend. Reducing HTTP requests is the most essential technique to optimize your website. Use CSS sprites to combine several images into a single image called a sprite sheet. Use CDN to cache all static data such as JavaScript, and images and deliver it locally. 12 2 [See all CSS archives](/tags/css/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/css/best-of/2021/05#page","url":"https://daily.dev/tags/css/best-of/2021/05","name":"Best CSS Posts — May 2021","description":"The most upvoted CSS posts from May 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/css/best-of/2021/05#items","numberOfItems":16,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/daisyui-free-ui-components-plugin-for-tailwind-css--4opgw0te","name":"DaisyUI — Free UI components plugin for Tailwind CSS"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/5-css-practices-to-avoid-as-a-web-developer-bsj6gzegz","name":"5 CSS Practices To Avoid as a Web Developer"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/css-is-pph2l7ml","name":"CSS :is"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/tailwind-css-from-zero-to-hero---the-utility-first-workflow-qlvk2y9ei","name":"Tailwind CSS from Zero to Hero - The Utility-First Workflow"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/json-in-css-1t5ul1mhk","name":"JSON in CSS"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/next-gen-css-container--rk7nbdtj","name":"Next Gen CSS: @container"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/image-gallery-with-react-and-tailwind-css-upp5n2bd8","name":"Image Gallery with React and Tailwind CSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/tailwind-figma-figma-ui-kit-built-for-integration-with-tailwind-css-raoawhlco","name":"Tailwind Figma — Figma UI kit built for integration with Tailwind CSS"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/a-new-way-to-reduce-font-loading-impact-css-font-descriptors-op38kycah","name":"A New Way To Reduce Font Loading Impact: CSS Font Descriptors"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-create-a-sticky-footer-in-css-0coi1tany","name":"How to Create a Sticky Footer in CSS"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/css-fundamentals-and-cheat-sheet---4kevuq6v","name":"CSS fundamentals and cheat sheet."},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/a-love-letter-to-html-css--vqw5ihw0","name":"A Love Letter to HTML & CSS"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/creating-colorful-smart-shadows-suyovyca2","name":"Creating Colorful, Smart Shadows"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/how-to-create-neon-text-with-css-lhcmj5enr","name":"How to Create Neon Text With CSS"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/advanced-css-animation-using-cubic-bezier--hgbjbyhcy","name":"Advanced CSS Animation Using cubic-bezier()"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/best-techniques-for-client-side-optimization-the-high-performance-series-hrr3qjwma","name":"Best Techniques for Client-Side Optimization: The High-Performance Series"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"CSS","item":"https://daily.dev/tags/css"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/css/best-of"},{"@type":"ListItem","position":5,"name":"May 2021"}]}]} ```