Best of Tailwind CSS — 2025
- 1
- 2
Hacker News·36w
Why our website looks like an operating system
PostHog redesigned their website to function like an operating system, featuring window management, keyboard shortcuts, and multitasking capabilities. The design addresses the common problem of managing multiple tabs on technical websites by allowing users to open and arrange multiple pages simultaneously within a single browser window. The implementation includes OS-inspired UI elements like file explorers, PowerPoint-style presentations, and spreadsheet layouts, built using TypeScript and Tailwind CSS with a JSON-driven content architecture.
- 3
Dev Tools·46w
Pattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a new tool offering a modern collection of background patterns, gradients, and glow effects designed for landing pages, portfolios, and web applications. The tool provides professional-grade backgrounds that can be easily copied and pasted into projects, with built-in support for modern CSS and Tailwind CSS for seamless integration.
- 4
Community Picks·49w
Animate UI
Animate UI is an open-source component distribution system that provides fully animated React components built with TypeScript, Tailwind CSS, and Framer Motion. It complements Shadcn UI by offering motion-animated components that can be installed via CLI or copied directly into projects. The platform focuses on providing dynamic backgrounds, primitive animated components, and text effects rather than being a traditional library.
- 5
OpenSouls·1y
Top UI libraries with copy-paste components for developers
A curated list of free UI libraries that leverage Tailwind CSS for styling, featuring multiple open-source options. Ideal for developers looking for ready-to-use, copy-paste components. Contributions for additional libraries are welcome to keep the list updated.
- 6
Introducing the Supabase UI Library
Supabase has released an official UI Library consisting of ready-to-use components built on shadcn/ui, compatible with various React frameworks. The library includes components for password-based authentication, file uploads, real-time cursor sharing, user avatars, and chat functionalities. These components are fully customizable with Tailwind CSS and designed to simplify the integration of complex features in your projects. Additionally, Supabase provides AI code editor rules to enhance development with Supabase and Postgres.
- 7
JavaScript Mastery·50w
Build 3 Full-Stack Web Apps That Will Land You a Dev Job (12-Hour Full Course)
A comprehensive 12-hour course teaching React development through building three production-ready applications: a movie app with trending features, a serverless file management system, and an AI-powered travel admin panel. Covers React 19 fundamentals, hooks, state management, component architecture, styling with Tailwind CSS v4, and deployment strategies. Uses modern tools like Next.js 15, Appwrite for backend services, and includes practical examples of authentication, file handling, and API integration.
- 8
RizzUI
RizzUI is a modern and minimal React UI library built with TailwindCSS, designed to offer simple, customizable, and accessible components. It includes a variety of production-ready elements categorized under buttons, inputs, navigation, feedback, overlays, data display, typography, and integrations. RizzUI emphasizes ease of use, full customization, type safety, and accessibility compliance.
- 9
- 10
RUBYLAND·51w
10 Modern CSS Features You Want to Use
Modern CSS has evolved significantly with new features that reduce the need for preprocessors and frameworks. Key additions include mathematical functions (min, max, clamp) for responsive sizing, container queries for component-based responsive design, text-wrap properties for better typography, @starting-style for animating from display:none, :has() selector for parent styling based on children, simplified media query ranges, light-dark() function for theme switching, color-scheme property for system UI theming, native nesting support, new viewport units (dvh, svh, lvh) for mobile browsers, and @layer for managing CSS specificity conflicts.
- 11
tailwindcss·1y
Tailwind UI is now Tailwind Plus
Tailwind UI has been rebranded as Tailwind Plus, maintaining its one-time purchase model and lifetime access. Existing Tailwind UI All-Access license holders are automatically upgraded to Tailwind Plus. The new brand aims to provide enhanced features such as Tailwind Play accounts, custom editor themes, alternative color palettes, and more. Tailwind Plus also focuses on building a stronger community and offering early access to beta documentation and events.
- 12
I Made 12 CSS Tools to Make Life Easier for Developers
Discover a collection of 12 handy CSS tools on NotchTools designed to simplify everyday CSS tasks. These tools generate code for effects like glassmorphism, underlines, text glow, box shadows, and more. NotchTools also provides utilities like CSS minification, beautification, and color conversions, all aimed at enhancing developer workflows.
- 13
developedbyed·1y
Build your own UI Library - a simple guide
Learn how to set up a component library and design system similar to popular frameworks using Tailwind CSS, React, and Panstack. The guide covers the creation of UI components like buttons, the use of Tailwind merge libraries, and the importance of type safety for CSS class names and variants.
- 14
Tailwind CSS v4 Full Course 2025 | Master Tailwind in One Hour
Master Tailwind CSS with this comprehensive course that teaches utility-first styling, responsive layouts, dark mode, and custom themes. Learn how to structure projects correctly, understand best practices, and optimize your workflow. Gain access to quizzes, interactive exercises, and in-depth lessons on the JS Mastery Pro platform, where you will build a complete, professional landing page.
- 15
- 16
LogRocket·39w
daisyUI 5 is here: What’s new and what to expect
daisyUI 5 represents a complete rewrite of the popular Tailwind CSS component library, offering significant performance improvements with 75% smaller bundle size and zero dependencies. The major changes include moving configuration from JavaScript to CSS files, introducing a powerful new theming engine with readable CSS variables and oklch color functions, and adding new components like Validator and List. The update also brings new style modifiers such as btn-soft and btn-dash, plus global effect variables for depth and noise. Migration involves updating package versions, moving plugin configuration to CSS, and updating some class names like card-compact to card-sm.
- 17
- 18
Lobsters·24wVanilla CSS is all you need
Modern CSS has evolved to include native variables, nesting, container queries, and advanced features like :has() and color-mix(), making build tools and preprocessors unnecessary for many projects. An analysis of three production applications from 37signals (Campfire, Writebook, and Fizzy) reveals a consistent nobuild CSS architecture using OKLCH colors, character-based spacing, semantic component classes with minimal utilities, and progressive adoption of cutting-edge CSS features. The approach demonstrates that vanilla CSS can handle real-time chat, publishing platforms, and project management tools with 14,000 lines across 105 files, achieving sophisticated interactions like animated dialogs, dynamic theming, and stateful UI without JavaScript or build steps.
- 19
WebCraft·45w
Collection of UI components. Built for Next.js and React with Tailwind CSS and shadcn/ui
Kokonutui offers over 100 open-source UI components specifically designed for React and Next.js applications. The components are built using Tailwind CSS, shadcn/ui, and Motion, providing modern and visually appealing interface elements for web developers.
- 20
- 21
freeCodeCamp·1y
How to Build a Dynamic Web Scraper App with Playwright and React: A Step-by-Step Guide
Build a web scraper app with Playwright and React to scrape data from Airbnb and display it in a grid view. Utilize local storage for efficient performance and an Express.js server to handle API requests. Follow detailed steps for setup, including installing Vite, TailwindCSS, and Playwright, creating a server, and implementing retry mechanisms for reliability. Learn how to deploy the app on render.com and understand the importance of ethical and legal considerations in web scraping.
- 22
Dev Squad·1y
Terminal UI Inspired Portfolio
A developer created a unique terminal-themed portfolio using Next.js and Tailwind CSS, featuring a command box where users can type 'help' to learn more about them. The portfolio includes a theme toggle with various developer-inspired themes for customization.
- 23
Glaze
Glaze is a utility-based animation framework for the web, built on GSAP. It emphasizes an HTML- and utility-first approach similar to Tailwind. The framework supports responsive design, timelines for sequencing animations, and uses a dot notation for nested properties. While currently tailored for GSAP, its syntax may accommodate other libraries in the future.
- 24
CSS-Tricks·37w
Composition in CSS
CSS has always been composable through the cascade, allowing developers to combine classes and styles naturally. While utility frameworks like Tailwind promote composition, traditional CSS approaches like combining classes or using Sass mixins are equally valid forms of composition. The author argues that CSS composition extends beyond just adding classes in HTML and proposes organizing styles into four categories: layouts, typography, theming, and effects. Rather than focusing on reducing CSS or HTML bloat, developers should prioritize code architecture, structure, and clarity for better maintainability.
- 25
Hide Scrollbars While Keeping Scrolling Intact
Learn how to hide scrollbars while keeping scrolling intact using various CSS techniques, including TailwindCSS. This can enhance the user experience in sleek and minimalistic web designs by decluttering the UI. Ensure accessibility by maintaining functional scrolling through trackpads, touch gestures, or keyboard navigation.
