Best of Tailwind CSS — October 2024

  1. 1
    Video
    Avatar of wdsWeb 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.

  2. 2
    Video
    Avatar of codinginpublicCoding in Public·2y

    Favorite New Tailwind Extension

    Fluid Tailwind is a new plugin that leverages the CSS clamp function to allow smooth transitions of values like padding, margin, and text sizes within Tailwind CSS. This plugin simplifies writing Tailwind classes and enhances UX by providing fluid transitions between values. The post also guides on setting up and configuring the plugin properly to work with Tailwind's default settings.

  3. 3
    Article
    Avatar of communityCommunity Picks·2y

    Shadcnblocks.com: 250 premium blocks for Shadcn UI

    A premium collection of 250 high-quality marketing blocks designed specifically for Shadcn UI, Tailwind, and React. Created by professional designers and developers, these components are fully interactive, responsive, and can be easily integrated into existing projects.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    Shadcn Form Builder

    Minimalist templates for building your next product using React, NextJS, TailwindCSS, Framer Motion, and Typescript.

  5. 5
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·2y

    CSS & HTML, Build Tools, JS Utilities

    A collection of useful web development tools and frameworks including skellyCSS for skeleton screens, tailwind-to-inline for converting Tailwind classes to inline styles, and various other CSS libraries. It also highlights build tools and JavaScript utilities such as Hot Hook, nrr, and UAParser.js. Additionally, it features commercial apps for analytics, interactive FAQs, and drag-and-drop code editors.

  6. 6
    Article
    Avatar of communityCommunity Picks·2y

    Building a Google Meet Clone with React and TailwindCSS

    This post is part two in a series on building a Google Meet clone using Next.js and TailwindCSS. It focuses on creating the meeting page UI, which includes custom video layouts, call controls, and integrating features such as screen sharing, chat messaging, and call recording. The custom components such as `ParticipantViewUI`, `VideoPlaceholder`, `GridLayout`, and `SpeakerLayout` are detailed. Additionally, the post explains how to add animations using GSAP and integrate call control buttons for toggling the microphone, camera, screen sharing, recording, and leaving the call. Finally, a Meeting Popup component is introduced to notify the meeting creator and provide the meeting link for sharing.

  7. 7
    Video
    Avatar of youtubeYouTube·2y

    Build a Nextjs Project Management App & Deploy on AWS | Cognito, EC2, Node, RDS, Postgres, Tailwind

    In this detailed guide, Ed Row demonstrates building and deploying a full-stack project management application using Nextjs, Node.js, and AWS. The application includes features like task drag-and-drop, multiple views (list, timeline, table), and user authentication via AWS Cognito. The front end utilizes Nextjs with Redux Toolkit for state management and Tailwind CSS for styling. The backend is handled by Node.js with Express and Prisma for database interactions. AWS services such as EC2, RDS, and Amplify are used for deployment, ensuring the application is scalable and enterprise-ready.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    Shadcn: The Secret to Productive UI Development

    Shadcn is a versatile, open-source library offering pre-built UI components that enhance productivity and maintainability in web development. Combining Tailwind CSS with Radix UI primitives, it provides flexible and accessible design elements that can be seamlessly integrated with frameworks like Next.js. Shadcn promotes consistent codebases, easy maintenance, and efficient collaboration in large teams, making it a valuable tool for developers.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    themeselection/flyonui: 🚀 The most easiest, free and open-source Tailwind CSS component library with semantic classes.

    FlyonUI is an open-source component library for Tailwind CSS offering semantic classes and interactive JavaScript plugins. It allows developers to build beautiful, maintainable, and scalable UIs with ease. Featuring over 800 free components, universal framework compatibility, unlimited themes, and built-in RTL support, FlyonUI enhances productivity and efficiency in web development.

  10. 10
    Video
    Avatar of youtubeYouTube·2y

    Build a Jira Clone With Nextjs, React, Tailwind, Hono.js | Part 1/2 (2024)

    Antonio's step-by-step course teaches you how to build a full-featured Jira clone using Next.js, React, Tailwind CSS, and Hono.js. It's targeted at developers looking to enhance their skills with complex web applications and project management tools. The project includes building a comprehensive task management interface with different views, user management features, workspace customization, and more. It also covers the initial setup, selecting runtimes, and ensuring dependencies are correctly installed.

  11. 11
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    From Concept to Code: How to Use AI Tools to Design and Build UI Components

    Learn how to streamline your UI development process by using AI tools like Sourcegraph's Cody and Tailwind CSS. This guide walks you through setting up your environment, creating foundational components, and leveraging Cody for generating efficient, functional, and visually appealing UI elements. By integrating these technologies, you enhance productivity and ensure a better user experience for your web applications.

  12. 12
    Article
    Avatar of rubylaRUBYLAND·2y

    Tailwind CSS Patterns

    The author created lightweight and visually interesting layouts for Rails Designer using Tailwind CSS for background patterns. They explored and compiled various patterns into a collection for inspiration and easy integration.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    How to prevent re-render in React with Tailwind CSS

    Learn how to prevent re-renders in React components by using Tailwind CSS and HTML, instead of JavaScript, to manage conditional class application. The post illustrates both traditional and alternative methods, emphasizing the benefits of the data-* attribute and group modifier for simpler, more efficient component design without triggering re-renders.

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    Animation library for Tailwind CSS Library

    A new syntax animation library for Tailwind CSS, 'tailwindcss-motion', offers beautiful, performant, and accessible animations. The library is open-source and infinitely configurable, with an easy-to-use syntax. It ensures browser compatibility and optimized performance while integrating accessibility by default. Installation is straightforward with npm.

See all Tailwind CSS archives