Best of Tailwind CSSDecember 2024

  1. 1
    Article
    Avatar of devsquadDev 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).

  2. 2
    Article
    Avatar of communityCommunity Picks·1y

    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.

  3. 3
    Video
    Avatar of youtubeYouTube·1y

    Build a Real-Time Google Docs Clone With Next 15, React, Tailwind (2024)

    Learn to build a functional Google Docs clone using modern web technologies like Next.js 15, React 19, and Tailwind CSS. The project supports real-time synchronization, collaborative editing, commenting, and more. Users can choose from various document templates, customize formatting, and export documents in multiple formats, including PDF and JSON.

  4. 4
    Article
    Avatar of communityCommunity Picks·1y

    Free React Tailwind Admin Dashboard Template

    TailAdmin React is a free, open-source admin dashboard template built with React, Tailwind CSS, and TypeScript. It features a comprehensive toolkit of components and pages for developing modern, data-driven backends, dashboards, and admin panels. The template offers four different dashboard variations tailored for analytics, e-commerce, marketing, and CRM applications. It supports dark/light mode, has extensive customization options, provides lifetime free updates, and includes seamless Webpack and Vite support.

  5. 5
    Article
    Avatar of communityCommunity Picks·1y

    Justd

    Justd is a collection of accessible React UI components based on React Aria Components, designed for easy customization and integration into projects. It includes built-in Tailwind CSS for seamless styling. Various starter kits for frameworks like Next.js, Laravel, and Remix are provided. The project is open-source and available on GitHub for contributions.

  6. 6
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    Tailwind just broke a TON of websites...

    Tailwind CSS recently faced an issue where custom text selection colors broke in the latest version of Chrome (131). This problem arose due to changes in Chrome's handling of CSS variables and selection properties. Although quickly addressed, the incident highlights the complexities of web development and browser compatibility, emphasizing the need for cautious use of advanced CSS features. Fixes include using specific Tailwind settings or waiting for Chrome updates.

  7. 7
    Article
    Avatar of communityCommunity Picks·1y

    Building a Discord Clone Using Next.js and Tailwind

    This series of blog posts guides you through building a clone of the Discord app using Next.js, Stream's Chat SDK, and Stream's Video SDK. The project is broken down into five parts: setup, server list creation, channel list customization, message list styling, and adding audio/video calling features. The posts provide detailed instructions and the full code is available on GitHub.

  8. 8
    Article
    Avatar of communityCommunity Picks·1y

    Building a Slack Clone with React and TailwindCSS

    Build a Slack-like collaboration app using React (Next.js), TailwindCSS, Prisma, and Stream SDKs. The guide covers project setup, database configuration, user authentication with Clerk, and creating a user interface. Follow the three-part series to add real-time messaging, video calls, and more, resulting in a robust app for team collaboration.

  9. 9
    Article
    Avatar of devsquadDev Squad·1y

    Nexbase - A modern, design-focused next js v15 boilerplate.

    Nexbase is a modern SaaS boilerplate built with Next.js 15, TypeScript, Tailwind CSS, and other industry-leading tools. It emphasizes both design and development speed, with built-in security features, weekly updates, and comprehensive functionalities. Ideal for developers seeking high-quality and aesthetically pleasing projects.

  10. 10
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Build a Reusable Keyboard Shortcut Listener Component in React

    Learn how to build a reusable keyboard shortcut listener component in React using Tailwind CSS and Framer Motion. This component can enhance the user experience by efficiently handling keyboard shortcuts, providing a cleaner codebase, and improving accessibility. The guide includes code snippets, setup instructions, and tips for adding animations and optimizing for accessibility.