Best of Tailwind CSSNovember 2024

  1. 1
    Article
    Avatar of reactjsxReactTsx·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.

  2. 2
    Article
    Avatar of tailwindcsstailwindcss·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.

  3. 3
    Article
    Avatar of fullstackdeveloperFullstack Developer·1y

    Cursify Cursor Animation Library

    Introducing Cursify, an open-source library that provides stunning cursor animations. Built with React, TypeScript, Tailwind CSS, and Framer Motion, it is fully customizable and easy to integrate, adding interactivity to projects effortlessly.

  4. 4
    Article
    Avatar of communityCommunity Picks·2y

    How I Built My Portfolio

    Building a high-quality portfolio website goes beyond simple HTML and CSS. Utilizing an advanced tech stack like Next.js, Tailwind CSS, Shadcn UI, and Vercel can transform your static portfolio into a dynamic, professional site. The post explores the reasons for over-engineering, such as creating a better user experience, making your site scalable, and demonstrating a commitment to quality. It also highlights specific advantages of Next.js, like built-in SEO support, optimized image handling with the `next/image` component, and Partial Pre-rendering for combining static and dynamic content.

  5. 5
    Article
    Avatar of communityCommunity Picks·1y

    1,700+ Free Tailwind CSS Examples

    The Tailwind CSS Components Library offers over 1700 free, ready-to-use components for creating stunning UIs effortlessly. Users can explore the Tailwind Playground for live previews, save and share components, and showcase their design skills through personal profiles. The library is maintained by the Tailwind community and encourages contributions. All components are free for personal and commercial use under open-source licenses.

  6. 6
    Video
    Avatar of youtubeYouTube·1y

    You can now build AWESOME TailwindCSS Animations!

    Discover Rumbo, a new TailwindCSS plugin for creating beautiful, performant, and accessible animations effortlessly. With easy installation and a variety of pre-built classes, you can quickly enhance your projects with animations. The plugin also offers a visual editor for custom animations, making it ideal for developers seeking simple and efficient animation solutions without the complexity of traditional animation libraries.

  7. 7
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind CSS easing classes

    A set of easing functions is provided for use in Tailwind CSS projects. It is recommended to use class names with arbitrary properties like `[transition-timing-function:cubic-bezier(...)]` instead of `ease-[cubic-bezier(...)]`, particularly when working with the tailwindcss-animate plugin, due to compatibility issues noted in the Tailwind CSS documentation.

  8. 8
    Article
    Avatar of communityCommunity Picks·1y

    Tailwind Background

    A collection of modern background snippets crafted with Tailwind CSS, ready for immediate use. These snippets are perfect for full-page backgrounds and can be previewed and customized as needed.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    Tailwind CSS Centering: Examples with Tutorial

    Tailwind CSS simplifies the often complex task of centering elements in web design through its utility-first approach. This tutorial highlights various techniques for centering text, divs, and inline elements using utility classes like `text-center`, `justify-center`, and `items-center`. It covers installing Tailwind via CDN or npm and details different strategies for horizontal and vertical alignment, enhancing both speed and consistency in web development.

  10. 10
    Video
    Avatar of youtubeYouTube·1y

    Full Stack NextJs Course : AI Note Taking App Using React, Tailwind css | SaaS App

    Learn to build a full-stack AI PDF note-taking application using React and Next.js from scratch. This tutorial covers using AI to generate answers from PDF content, building a feature-rich interface with React and Tailwind CSS, implementing authentication with Clerk, real-time database with Convex, and deploying the application. Users will be able to upload PDFs, ask questions, and take notes efficiently with AI assistance. The guide also includes options for upgrading to a paid plan with payment integration.

  11. 11
    Video
    Avatar of javascriptmasteryJavaScript Mastery·2y

    Build and Deploy an Awwwards Winning Website | React.js, Tailwind CSS, GSAP

    Learn how to build an award-winning website from scratch using React.js, Tailwind CSS, and GSAP. This comprehensive guide takes you through every step—from setting up your development environment and deploying your site, to implementing complex animations and interactive features. Ideal for developers looking to create stunning, high-performance websites independently.

  12. 12
    Video
    Avatar of wawasenseiWawa Sensei·2y

    Build a 3D Avatar Builder with Threejs and React - Full Course

    Learn how to build a fully customizable 3D avatar creator using Threejs, React, and Tailwind CSS. This guide covers setting up the backend with PocketBase for managing 3D assets, using Blender for creating and preparing 3D accessories, and integrating these elements into a React app. The project also explores using React Three Fiber for rendering 3D models and managing states with Zustand.

  13. 13
    Article
    Avatar of communityCommunity Picks·2y

    Learn Tailwind CSS

    Explore the essentials of Tailwind CSS through a hands-on learning experience. Gain practical skills by working on five real-world projects.

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    Inspirational Tailwind Loading Page Animation Examples

    Loading animations enhance user experience by providing feedback while content loads. This guide explores Tailwind CSS animation utilities and offers various examples, such as full-screen GIFs, spinners, expanding circles, and bouncing dots. Tailwind CSS makes it easy to implement these animations, contributing to a more interactive, visually appealing, and user-friendly website.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    catppuccin/daisyui: 🌼 Soothing pastel theme for daisyUI

    Catppuccin provides a soothing pastel theme for daisyUI, compatible with npm, pnpm, and yarn package managers. It lets developers choose or customize themes such as Latte, Frappe, Macchiato, and Mocha. Accent colors can be assigned to primary, secondary, and other semantic color values. Recommended testing with provided HTML grid to ensure theme styling.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    How To Create Responsive Tailwind Bento Grid?

    Learn how to create a responsive Tailwind Bento Grid using Tailwind CSS and FlyonUI. Discover the benefits of a Bento grid design, including a clear and organized layout, visually engaging elements, improved user experience, and its adaptability to responsive design. Understand how FlyonUI enhances Tailwind CSS with pre-styled components and interactive features, making web development faster and more efficient. The tutorial provides step-by-step instructions to set up your development environment and build a stunning Tailwind Bento grid with practical examples.

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

    Tailwind V4 is WAY better than I expected

    Tailwind V4 has introduced significant changes, including a rewrite in Rust, making builds up to 100 times faster. The new version brings a unified tool chain, built-in import handling, vendor prefixing, and syntax transforms. It also emphasizes modern CSS features like container queries and 3D transforms, while allowing more seamless configuration directly in CSS. The update is anticipated to greatly enhance performance and ease of use.