Best of Tailwind CSS — May 2025

  1. 1
    Article
    Avatar of rubylaRUBYLAND·52w

    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.

  2. 2
    Article
    Avatar of communityCommunity Picks·1y

    9ui

    9ui offers a collection of beautiful and customizable components for building design systems using Base UI and Tailwind CSS. These components are free, open-source, and easy to integrate into projects, providing users with ready-to-use solutions for design enhancements.

  3. 3
    Article
    Avatar of communityCommunity Picks·1y

    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.

  4. 4
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Build a Dynamic Wardrobe App with React Drag and Drop

    The post provides a step-by-step tutorial for building a dynamic wardrobe app using React with drag-and-drop functionality. It guides readers through setting up the React environment, managing states, defining color options, and implementing the drag-and-drop feature. Additionally, it covers creating the user interface using Tailwind CSS and SVGs for an interactive experience.

  5. 5
    Video
    Avatar of communityCommunity Picks·1y

    How to Turn Figma Designs into code with Next.js, Tailwind CSS, Shadcn in 2025

    The post provides a comprehensive guide on translating Figma designs into functional code using Next.js, Tailwind CSS, and Shadcn. It explains setting up a front-end environment, integrating APIs, managing global state with Redux, and customizing design elements. Detailed instructions are included for transforming color palettes, typography, and component designs from Figma into code. It also introduces Ban, a JavaScript runtime, as an alternative to Node.js for improved performance and security.

  6. 6
    Article
    Avatar of communityCommunity Picks·1y

    Most Popular Themes For Shadcn

    Explore a collection of visually appealing ShadCN themes that are easy to integrate into web projects. The themes are optimized for TailwindCSS and Next.js, and available for quick download.

  7. 7
    Article
    Avatar of phProduct Hunt·52w

    Piny - Visual editor for Astro, React, Next.js & Tailwind

    Piny is a visual editor designed to function directly within Visual Studio Code, Cursor, and Windsurf. It supports frameworks such as Tailwind CSS, Astro, React, and Next.js, enabling real-time edits directly in the code without relying on cloud services or causing lock-in.

  8. 8
    Article
    Avatar of tailwindcsstailwindcss·1y

    Compass: A starter kit for online courses

    Compass is a new starter kit designed with Tailwind CSS and Next.js to help developers create online courses. It includes features like custom transcript UIs using WebVTT files, a self-built alternative to Picture-in-Picture video functionality, and dynamic image loading based on user color scheme preferences in Markdown. The kit is available for free to Tailwind Plus license holders.

  9. 9
    Video
    Avatar of communityCommunity Picks·1y

    🚀 Build & Deploy a Perplexity AI Clone with Next.js, React,Tailwind Css Inngest | Full Stack AI App

    Learn to build a perplexity.ai clone using Next.js, React, and Tailwind CSS, incorporating real-time AI search features. This full stack guide walks you through setting up event-driven workflows using Inngest platform, integrating AI models, and deploying the application to the cloud.

  10. 10
    Article
    Avatar of communityCommunity Picks·52w

    Tailwind CSS Gradient Generator & Text Gradients & Glassmorphism Generator

    Gradienty offers a Tailwind CSS Gradient Generator for creating visually appealing designs with customizable gradients. It features a collection of over 20,000 gradients suitable for vibrant and eye-catching web design projects.

  11. 11
    Article
    Avatar of alltailwindcssAll Tailwind CSS·1y

    50+ Tailwind CSS Templates, Components & Tools 💯

    Discover a curated collection of Tailwind CSS resources including templates, components, and UI kits designed to enhance your web development projects. Submit your tailwind-related projects to be featured on the platform.

See all Tailwind CSS archives