Best of Tailwind CSS — 2024
- 1
- 2
- 3
DEV·2y
🖥️ Windows 11 Clone with React.js
A developer created a Windows 11 clone web app using React.js, mimicking various Windows 11 functions like an interactive desktop environment, taskbar with start menu, and applications such as Chrome, Calculator, and VS Code. Other features include a responsive frontend and a simulated login screen. The technical stack includes React.js, Tailwind CSS, React Router DOM, Framer Motion, and React Draggable. The source code and demo are available on GitHub.
- 4
ReactTsx·1y
Cursify - Cursor Animation Library
Cursify is an open-source library designed for creating stunning cursor animations. It is built with React, TypeScript, Tailwind CSS, and Framer Motion, making it 100% customizable and easy to integrate into projects, enhancing interactivity effortlessly.
- 5
Community Picks·2y
Glass: an AI copilot for React and Next.js developers.
Glass provides an AI-powered assistant for React and Next.js developers, enabling them to create components, modify props, and write Tailwind CSS directly from the browser. It also allows developers to visualize component structures by hovering over elements and instantly jump to the source code of the selected element.
- 6
Faun·2y
Top Tips and Tricks with Tailwind CSS
Learn top tips and tricks to enhance your Tailwind CSS projects, including how to properly delegate classes, manage spacing between elements, and avoid overuse of the @apply utility. Discover how to add opacity, transitions, and animations, utilize group hover and pseudo-classes, and customize input values. Check out the provided resources for pre-made components and use the Tailwind IntelliSense plugin for an improved workflow.
- 7
Dev Squad·1y
Web Development Tools You Should Consider Using in 2025
Discover five web development tools that promise to enhance productivity and efficiency in 2025, including an intelligent terminal with AI features (Warp), a powerful Git client for managing branches (GitButler), a comprehensive Tailwind components library for React and HTML (Wind UI), a tool for better terminal log readability (Logdy), and a utility platform for creating engaging web animations (Glaze).
- 8
Tailwind Component Library
Tailbits is a comprehensive library of UI components designed with Tailwind CSS. It offers a wide range of components for various projects, allowing for easy copy-pasting. The components are licensed under CC BY 4.0 and the tool is developed by Danny Postma.
- 9
Tailwind CSS Page Creator
Tails V2 is a design tool for TailwindCSS developers, enabling the creation of beautiful websites with a comprehensive site builder, design library, and built-in code editor. It features project organization, multiple page settings, and usage of Tailwind V3 with JIT mode. Users can sign up for a free account or upgrade to a Pro plan for additional features and unlimited projects.
- 10
- 11
200+ Tailwind CSS Resources: Tools, Tutorials, and More
Tailwind CSS is a utility-first framework that emphasizes rapid styling, customization, and responsive design. This comprehensive guide offers over 200 Tailwind resources, including essential tools, component libraries, plugins, tutorials, optimization tips, and more. From installation and configuration to complex integrations and debuggings, such resources aim to streamline development and boost productivity. Additionally, it showcases various learning materials, templates, and community support channels to help developers efficiently build stunning websites with Tailwind CSS.
- 12
Atomic Spin·2y
5 Tailwind CSS Anti-Patterns to Avoid
Tailwind CSS has been a game-changer for developers, but there are anti-patterns to avoid when working with it. Avoid relying solely on the built-in color palette, under-utilize theme customization, and use a component-based framework. Additionally, avoid using the `@apply` directive and using Tailwind in domain-level components.
- 13
Introducing Eldora UI
Eldora UI is an open-source UI library designed for creating stunning web interfaces using React, TypeScript, Tailwind CSS, and Framer Motion. It offers customizable and animated components that are perfect for building responsive and visually appealing websites. Unique components like Cobeglobe and Spotlight Card are highlighted, and there is an active GitHub community for collaboration and innovation.
- 14
Ground. your animation kit
Animations have become easier to create with modern tools. This post introduces a set of handcrafted animated components built using Next.js, React, TailwindCSS, and Framer Motion, including elements like carousels, cards, and inputs. Check out Framer Ground for more examples.
- 15
Mamba UI
Mamba UI is a free, open-source collection of UI components and templates built with Tailwind CSS. It offers over 150 building blocks that are modular and customizable, making it easy to create various layouts for websites quickly. Users can copy-paste code directly into their projects and customize it. The project is continuously updated, and new features are in the pipeline.
- 16
- 17
tailwindcss·2y
Tailwind CSS v4.0 Beta 1
Eight months in the making, Tailwind CSS v4.0 Beta 1 is now available, featuring a new performance-oriented engine that boasts significantly faster build times. The update also includes a unified toolchain, CSS-first configuration, and modern web design enhancements like native cascade layers and container queries. Check out the beta documentation to get started and contribute to its development ahead of the stable release early next year.
- 18
- 19
🐥 cuicui.day - A high quality React & Tailwind UI library of copy-paste components
Cuicui is a newly released open-source UI library designed to simplify and enhance UI design with React and Tailwind. It emphasizes ease of use, customization, and promoting good coding practices. Featuring diverse artistic styles, dark and light mode support, and unique micro interactions, Cuicui aims to revolutionize UI component libraries.
- 20
maybe-finance/maybe: Personal finance and wealth management app
Maybe is an open-source personal finance app with features like net worth tracking, financial account syncing, investment benchmarking, and more. It is built using a tech stack including Next.js, Tailwind, Node.js, and Postgres.
- 21
Tailwind is an Anti-Pattern
The post critiques Tailwind CSS, arguing that its utility-first approach isn't new and has significant downsides such as bloated HTML, unnecessary naming conventions, and larger bundle sizes. It suggests that using Tailwind can hinder learning essential CSS patterns and result in code that's less readable and harder to maintain. The author emphasizes that traditional CSS practices and newer tools like CSS Modules and ShadowDOM are more efficient and sustainable for web development.
- 22
Web Dev Simplified·2y
Build a Full Stack Next.js App with Google Calendar - TypeScript, Drizzle, ShadCN, Tailwind
Learn how to build a modern full-stack application using Next.js, TypeScript, Drizzle, ShadCN, and Tailwind CSS. The tutorial covers setting up a clone of Calendly that integrates with Google Calendar, allowing users to schedule events based on availability. The steps include user authentication using Clerk, database setup with Postgres and Neon, and utilizing Tailwind CSS for styling.
- 23
100+ React Dashboard Components to Use in 2024
TailGrids is a comprehensive toolkit designed to help developers effortlessly build modern, user-friendly, and powerful React-based admin dashboards. It includes over 100 essential components such as charts, calendars, and maps, all optimized for performance and scalability with Tailwind CSS. The toolkit also offers four pre-built admin templates to accelerate development.
- 24
- 25
Neobrutalism components
A collection of neobrutalism-styled Tailwind components is introduced. These components are open source with an MIT License, easy to use after installing necessary dependencies, and customizable. Despite the negative feedback from the community, the components utilize Tailwind's utility classes for simple styling.
