ignite-tailwind

Techs

• Next.js - The React Framework for Production.
• Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
• Radix UI - A collection of open source UI components for React to accessibility.
• Framer Motion - A production-ready motion library for React.
• Lucide React - A simply beautiful open source icons.
• Auto Animate - A tool to create animations with Framer Motion.
• Tailwind Variants - A tool to create custom variants for Tailwindcss.
• Tailwind Merge - A tool to merge Tailwindcss classes.

Running

First, install the version 20.8.1 of node.js. Then, install the dependencies:

npm ci

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Learnings

• Using Radix UI components
• Using Tailwind Merge
• Tailwind Variants and Slots API
• Animations with Framer Motion and Auto Animate
• Using Lucide React icons
• Dark/Light theme with Tailwindcss and Theme Switcher