--- title: Best Tailwind CSS posts of 2023 | daily.dev description: The most upvoted Tailwind CSS posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/tailwind-css/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/tailwind-css/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best Tailwind CSS posts of 2023 | daily.dev og:description: The most upvoted Tailwind CSS posts of 2023, 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 Tailwind CSS — 2023 1. 1 [](/posts/the-react-ecosystem-in-2023-t1c5bte1z "The React Ecosystem in 2023") Article Builder.io · 3y The React Ecosystem in 2023 The React Ecosystem celebrates its 10th anniversary in 2023 as the ecosystem continues to flourish. For those who are new to React, getting started can be a daunting task. With a vast array of tools and libraries available within the React ecosystem, choosing the right combination for your project can be challenging. 603 38 2. 2 [](/posts/10-web-development-trends-in-2023-5h3aw-hrx "10 Web Development Trends in 2023") Article Robin Wieruch · 4y 10 Web Development Trends in 2023 The most popular meta framework called Next.js comes on top of React.js. SSR is all over the place when working with JavaScript frameworks these days. Other meta frameworks like SvelteKit are catching up. SSR has been competing with static site generation (SSG) for a while for the perfect performance. 559 58 3. 3 [](/posts/uiverse-io-2-0---3500-ui-elements-copy-the-code-or-use-in-figma--lee07viva "Uiverse.io 2.0 - +3500 UI Elements, copy the code or use in Figma!") Article Product Hunt · 3y Uiverse.io 2.0 - +3500 UI Elements, copy the code or use in Figma! Uiverse.io 2.0 offers over 3,500 open-source UI elements, Figma Copy & Paste, new categories like Forms and Tooltips, a sleek UI, and a GitHub repository. 471 7 4. 4 [](/posts/daisyui-tailwind-css-components-version-4-update-is-here--2inwzemtw "daisyUI — Tailwind CSS Components ( version 4 update is here )") Article Community Picks · 3y daisyUI — Tailwind CSS Components ( version 4 update is here ) daisyUI is a plugin for Tailwind CSS that adds component class names for common UI elements, reducing the need for writing utility class names. It also offers customizable color names and a theme generator. With daisyUI, developers can create beautiful websites faster and with less code. 408 19 5. 5 [](/posts/tailwind-css-tips-and-tricks-worth-knowing-tvycaidq8 "Tailwind CSS Tips and Tricks Worth Knowing") Article Builder.io · 3y Tailwind CSS Tips and Tricks Worth Knowing Tailwind allows us to change the style of an element based on its state with helper classes. There are some times where we are forced to use CSS for our styles. Tailwind has some very useful and easy-to-use animation utility classes. For example, we can add the transition color class and set a duration of 300 milliseconds. 323 38 6. 6 [](/posts/build-a-whatsapp-clone-realtime-chat-using-next-js-socket-io-tailwind-css-node-js-express-and--18ruqxvkn "Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma") Article DEV · 3y Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma This comprehensive WhatsApp clone comes packed with a range of awesome features to give you an authentic messaging experience. The Whatsapp Clone uses Next.js, Socket.io, Tailwind CSS, Node.js and Express and Prisma - DEV Community Features of the WhatsApp Clone. 297 18 7. 7 [](/posts/why-tailwind-css-won-ley4dakbz "Why Tailwind CSS Won") Article Matt Rickard · 3y Why Tailwind CSS Won Tailwind CSS has become synonymous to some degree with the UI components shipped through Tailwind UI (which is a UI framework) It replaces a generation of sites built with Twitter Bootstrap. Tailwind is tree-shaken by default and doesn’t have its own ideas of grids or flexboxes. 259 26 8. 8 [](/posts/building-a-full-stack-airbnb-clone-with-next-js-tailwind-css-amplication-and-more-zljgwxlf7 "Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More") Article Hacker Noon · 3y Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and more. The platform is centered around the concept of a low-code development environment. Amplication is an open-source development tool designed to simplify and expedite the process of building web applications. 221 8 9. 9 [](/posts/why-we-re-bad-at-css-xay7hnmqw "Why we're bad at CSS") Article Community Picks · 3y Why we're bad at CSS CSS is more like putting their hand in the pain box from Dune while some product manager has a gom jabbar to their neck, daring them to pull their hand out. Despite the latest advancements in CSS, many are still stuck in this kind of BEM mindset, trying to encapsulate everything. 211 19 10. 10 [](/posts/build-a-full-stack-reminderapp-with-react-nextjs-typescript-serveraction-zod-hook-form-prisma--rn8aly705 "Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind") Article ITNEXT · 3y Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind. Hi everyone, I published my last video: Build a full stack Reminder App. 211 11 11. 11 [](/posts/tailscan-2-for-tailwind-css---the-ultimate-browser-tool-for-tailwind-css-eaxmiqf2c "Tailscan 2 for Tailwind CSS - The ultimate browser tool for Tailwind CSS") Article Product Hunt · 3y Tailscan 2 for Tailwind CSS - The ultimate browser tool for Tailwind CSS Tailscan is the ultimate browser tool for Tailwind CSS that allows developers, designers, and product managers to build, design, and debug any Tailwind website visually. It helps speed up workflow and allows for quick changes. 208 15 12. 12 [](/posts/how-to-build-a-portfolio-website-with-react-tailwind-css-vuafwxiui "How to build a portfolio website with React & Tailwind CSS") Article DEV · 4y How to build a portfolio website with React & Tailwind CSS Every developer must have a portfolio website to show off their skills and projects. We will build portfolio website with React.js and Tailwind CSS. 203 19 13. 13 [](/posts/tailwind-css-application-ui-kit-smgrbbje1 "Tailwind CSS Application UI Kit") Article Hacker News · 3y Tailwind CSS Application UI Kit Tailwind CSS Application UI Kit, Catalyst, offers modern UI components built with Tailwind CSS, Headless UI, and React. The components are customizable, easy to use, keyboard accessible, and available in TypeScript and JavaScript. The templates can be purchased individually or with an all-access license, with free updates included. 198 5 14. 14 [](/posts/full-stack-engineer-career-guide-m0b42nnwr "Full Stack Engineer – Career Guide") Article freeCodeCamp · 3y Full Stack Engineer – Career Guide Full Stack engineering roles have been growing in popularity over the last decade. But what exactly are full-stack engineers? What do they do on a day-to-day basis? And how can you become a full- Stack engineer yourself? In this article, I will go over the definition of full- stack engineering. 186 2 15. 15 [](/posts/build-an-event-launch-page-next-js-13-react-typescript-tailwind-css-ycwnscurn "Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS") Article Community Picks · 3y Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS 175 3 16. 16 [](/posts/tailwind-css-15-component-libraries-ui-kits--lfr4yosb "Tailwind CSS: 15 Component Libraries & UI Kits") Article Community Picks · 4y Tailwind CSS: 15 Component Libraries & UI Kits Tailwind CSS has surpassed Bulma, Semantic UI, Foundation, and other prominent CSS frameworks in just a few years. It is now the 2nd most popular framework in the world, with Bootstrap holding a sturdy number one position. With several hundred custom components, it's also one of the most complete libraries. 172 24 17. 17 [](/posts/4-vscode-extensions-i-use-when-developing-with-tailwind-ubut2uffr "4 VSCode extensions I use when developing with Tailwind") Article DEV · 4y 4 VSCode extensions I use when developing with Tailwind A post discussing four VSCode extensions that are useful when developing with Tailwind CSS. The extensions include Tailwind CSS IntelliSense, Tailwind Fold, Tailwind Documentation, and Tailwind Config Viewer. 155 9 18. 18 [](/posts/tailwindcss-vs-unocss-a0vg4lfal "TailwindCSS vs. UnoCSS") Article DEV · 3y TailwindCSS vs. UnoCSS A comparison between TailwindCSS and UnoCSS, highlighting their features, language, documentation, custom styles, and editor support. 153 21 19. 19 [](/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp "Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit") Article ITNEXT · 3y Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new techniques and libraries. So what are you waiting for? Check out the video below and let me know what you think in the comments. 151 9 20. 20 [](/posts/daisy-ui-3-0-released-new-components-themes-improvements-and-more--euo84im0p "Daisy UI 3.0 Released: New components, themes, improvements, and more!") Article Community Picks · 3y Daisy UI 3.0 Released: New components, themes, improvements, and more! Daisy UI has introduced loading spinners with its latest version. Spinners indicate an activity or event is currently running in the background. The new Accordion component in Daisy UI is an update on but uses radio buttons inside the hood. This makes it possible to make JS-free components more efficient, faster, and accessible. 149 15 21. 21 [](/posts/skeleton-ui-toolkit-for-svelte-tailwind-lbk9lhuha "Skeleton — UI Toolkit for Svelte + Tailwind") Article Community Picks · 4y Skeleton — UI Toolkit for Svelte + Tailwind Skeleton is a UI toolkit for Svelte and Tailwind that allows for the creation of adaptive and accessible interfaces for web apps. It integrates directly with Svelte and SvelteKit's best features and offers interactive components, image filters, and more. 148 12 22. 22 [](/posts/clone-ui---generate-ui-components-for-use-in-seconds-7dty3ap1t "Clone UI - Generate UI components for use in seconds") Article Product Hunt · 3y Clone UI - Generate UI components for use in seconds The best of Product Hunt, everyday Popular products in... AI No Code Social Media E-Commerce Analytics. 143 4 23. 23 [](/posts/how-i-built-my-full-stack-portfolio-website-with-the-coolest-techs--b7udktsgg "How I Built My Full Stack Portfolio Website With the Coolest Techs🐬") Article DEV · 4y How I Built My Full Stack Portfolio Website With the Coolest Techs🐬 Learn how a full stack portfolio website was built using Next.js, Tailwind CSS, TypeScript, and other technologies. Explore the structure of the about page and the purpose of the guest book page. 141 12 24. 24 [](/posts/top-front-end-tools-of-2022-smashing-magazine-8d3ucysrm "Top Front-End Tools Of 2022 — Smashing Magazine") Article Smashing Magazine · 4y Top Front-End Tools Of 2022 — Smashing Magazine Top Front-End Tools Of 2022 are the most popular tools in the developer community. Almost all of these tools are practical tools you can use in your projects today. Piling.js is a JavaScript library that allows you to build interfaces where large amounts of items can be dragged and dropped into “piles” It’s built on top of PixiJS. 136 6 25. 25 [](/posts/gradienty---tailwind-gradient-box-shadow-generator-5xka1wmag "Gradienty - Tailwind gradient & box shadow generator") Article Product Hunt · 3y Gradienty - Tailwind gradient & box shadow generator Gradienty - Tailwind gradient & box shadow generator. Roushan: "How intuitive did you find the tool? Are there any additional features you'd love to see? 135 2 [See all Tailwind CSS archives](/tags/tailwind-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/tailwind-css/best-of/2023#page","url":"https://daily.dev/tags/tailwind-css/best-of/2023","name":"Best Tailwind CSS Posts of 2023","description":"The most upvoted Tailwind CSS posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/tailwind-css/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-react-ecosystem-in-2023-t1c5bte1z","name":"The React Ecosystem in 2023"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/10-web-development-trends-in-2023-5h3aw-hrx","name":"10 Web Development Trends in 2023"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/uiverse-io-2-0---3500-ui-elements-copy-the-code-or-use-in-figma--lee07viva","name":"Uiverse.io 2.0 - +3500 UI Elements, copy the code or use in Figma!"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/daisyui-tailwind-css-components-version-4-update-is-here--2inwzemtw","name":"daisyUI — Tailwind CSS Components ( version 4 update is here )"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/tailwind-css-tips-and-tricks-worth-knowing-tvycaidq8","name":"Tailwind CSS Tips and Tricks Worth Knowing"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/build-a-whatsapp-clone-realtime-chat-using-next-js-socket-io-tailwind-css-node-js-express-and--18ruqxvkn","name":"Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/why-tailwind-css-won-ley4dakbz","name":"Why Tailwind CSS Won"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/building-a-full-stack-airbnb-clone-with-next-js-tailwind-css-amplication-and-more-zljgwxlf7","name":"Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/why-we-re-bad-at-css-xay7hnmqw","name":"Why we're bad at CSS"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/build-a-full-stack-reminderapp-with-react-nextjs-typescript-serveraction-zod-hook-form-prisma--rn8aly705","name":"Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/tailscan-2-for-tailwind-css---the-ultimate-browser-tool-for-tailwind-css-eaxmiqf2c","name":"Tailscan 2 for Tailwind CSS - The ultimate browser tool for Tailwind CSS"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-to-build-a-portfolio-website-with-react-tailwind-css-vuafwxiui","name":"How to build a portfolio website with React & Tailwind CSS"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/tailwind-css-application-ui-kit-smgrbbje1","name":"Tailwind CSS Application UI Kit"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/full-stack-engineer-career-guide-m0b42nnwr","name":"Full Stack Engineer – Career Guide"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/build-an-event-launch-page-next-js-13-react-typescript-tailwind-css-ycwnscurn","name":"Build an Event Launch Page: Next.js 13, React, TypeScript, Tailwind CSS"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/tailwind-css-15-component-libraries-ui-kits--lfr4yosb","name":"Tailwind CSS: 15 Component Libraries & UI Kits"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/4-vscode-extensions-i-use-when-developing-with-tailwind-ubut2uffr","name":"4 VSCode extensions I use when developing with Tailwind"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/tailwindcss-vs-unocss-a0vg4lfal","name":"TailwindCSS vs. UnoCSS"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp","name":"Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/daisy-ui-3-0-released-new-components-themes-improvements-and-more--euo84im0p","name":"Daisy UI 3.0 Released: New components, themes, improvements, and more!"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/skeleton-ui-toolkit-for-svelte-tailwind-lbk9lhuha","name":"Skeleton — UI Toolkit for Svelte + Tailwind"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/clone-ui---generate-ui-components-for-use-in-seconds-7dty3ap1t","name":"Clone UI - Generate UI components for use in seconds"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/how-i-built-my-full-stack-portfolio-website-with-the-coolest-techs--b7udktsgg","name":"How I Built My Full Stack Portfolio Website With the Coolest Techs🐬"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/top-front-end-tools-of-2022-smashing-magazine-8d3ucysrm","name":"Top Front-End Tools Of 2022 — Smashing Magazine"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/gradienty---tailwind-gradient-box-shadow-generator-5xka1wmag","name":"Gradienty - Tailwind gradient & box shadow generator"}]},{"@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":"Tailwind CSS","item":"https://daily.dev/tags/tailwind-css"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/tailwind-css/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```