Best of Tailwind CSS — January 2025
- 1
- 2
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.
- 3
Community Picks·1y
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.
- 4
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.
- 5
- 6
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.
- 7
- 8
Building a CRUD app with Shadcn UI and Refine
Learn how to integrate Shadcn UI components with a Refine app using Vite and TypeScript. This post walks you through setting up TailwindCSS, configuring TypeScript and Vite, and generating Shadcn components such as tables, buttons, and pagination for a seamless UI experience.
- 9
Prismic·1y
Tailwind CSS Animations: Tutorial and 40+ Examples
Tailwind CSS simplifies adding animations to web designs with its utility-first approach and prebuilt classes. This post provides over 40 examples of different animations, including spin, pulse, and bounce effects, along with custom animations using Tailwind's configuration file. It also compares Tailwind with Bootstrap and introduces several tools and libraries to enhance animations. Readers can explore various animation techniques, from simple effects to complex, visually appealing transitions.
- 10
NextJS·1y
Building an Animated Link Component with react-rough-notation in Next.js
Learn how to create an animated link component using react-rough-notation in Next.js. This guide covers the implementation details, including installing necessary dependencies, creating utility functions, and applying customizable animation styles. It also demonstrates various use cases such as customizing styles, supporting responsive design, and enhancing accessibility.
- 11
druidui/ui: druid/ui
Discover a collection of beautifully crafted, customizable, and accessible UI components built with shadcn/ui and Tailwind CSS. These components are fully responsive, mobile-friendly, and developed in TypeScript. Explore the components and get installation instructions at druid/ui.
- 12
LogRocket·1y
Getting ready for Tailwind v4.0
Tailwind CSS v4.0 introduces a new performance engine, Tailwind Oxide, and simplifies project setup by eliminating the need for a `tailwind.config.js` file. This version allows customizations directly within the CSS file using the `@theme` directive. Container queries now have built-in support, and many existing utilities have been improved for better efficiency and styling. An upgrade tool is available to assist with migrating projects from v3 to v4, and several changes to existing utilities are outlined to ensure compatibility.
