Faun·2yTop 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.
Dev Squad·2yIntroducing 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.
Community Picks·2yMamba 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.
Community Picks·2yInstallation • Tremor Raw
Tremor Raw can be set up with React v18.2.0+ and Tailwind CSS v3.4+. It is compatible with frameworks like Next.js, Vite, and Remix. Additional resources include Tremor Blocks for production-ready components and a Figma UI Kit for design purposes. The Remix Icon set, licensed under Apache License 2.0, is recommended for use.
LogRocket·2yBuilding UIs with Franken UI, a Shadcn alternative
Franken UI is an open-source library offering pre-built UI components with an HTML-first approach. It is framework-agnostic, ensuring seamless integration with JavaScript frameworks like Vue, React, or Svelte. Compatible with UIkit 3 and Tailwind CSS, it allows for extensive customization through CSS variables and utility classes. Key features include dark mode, theming, hooks, and over 70 reusable components. Despite being relatively new, Franken UI is gaining traction among developers for its flexibility and ease of use.
Community Picks·2yCreating a Responsive Profile Settings UI with Tailwind CSS
Learn how to design a user profile settings interface using Tailwind CSS. The guide includes creating minimalist and enhanced profile settings, along with a responsive profile settings page featuring a sidebar. Focus is on using Tailwind CSS's utility-first approach to style various components for a visually appealing and user-friendly interface.
Dev Squad·2yIntroducing Animata
Animata is a free and open-source project designed to simplify the addition of animations to React and Tailwind projects. It offers a diverse collection of 40+ customizable animation components. Users can browse for inspiration, utilize pre-built animations, and dive into the code to learn the principles of CSS animations. The project encourages contributions and provides detailed documentation to assist with implementation. Feedback is welcome to improve the project, which is currently in its beta phase.
Hacker News·2yonlook-dev/studio: The power of webflow for your React app
Onlook Studio is a browser-powered visual editor designed for React + TailwindCSS applications. It allows developers to build UIs visually and supports Next.js and standard React apps with built-in plugins. The post includes instructions for cloning the repository, installing dependencies, and running demo projects. It also provides guidelines on integrating Onlook plugins in user's own projects. Further details are available in their documentation, roadmap, and open issues.