ReactTsx·1yCursify - 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.
tailwindcss·2yTailwind 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.
Community Picks·2yHow 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.
Community Picks·1y1,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.
YouTube·1yYou 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.
Community Picks·2yTailwind 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.
Community Picks·2yTailwind 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.
YouTube·1yFull 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.
JavaScript Mastery·2yBuild 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.
Wawa Sensei·2yBuild 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.
Community Picks·2yInspirational 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.
Community Picks·2ycatppuccin/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.
Community Picks·2yHow 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.
Theo - t3․gg·1yTailwind 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.
