https://github.com/mauricioromagnollo/ignite-tailwind

A study project about tailwindcss and next.js.
https://github.com/mauricioromagnollo/ignite-tailwind

autoanimate framer-motion lucide-react nextjs radix-ui tailwind tailwind-merge tailwind-variants tailwindcss

Last synced: 21 days ago
JSON representation

A study project about tailwindcss and next.js.

• Host: GitHub
• URL: https://github.com/mauricioromagnollo/ignite-tailwind
• Owner: mauricioromagnollo
• Created: 2023-11-18T21:45:12.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2023-11-21T00:54:03.000Z (12 months ago)
• Last Synced: 2023-11-21T23:22:09.788Z (12 months ago)
• Topics: autoanimate, framer-motion, lucide-react, nextjs, radix-ui, tailwind, tailwind-merge, tailwind-variants, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 946 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **ignite-tailwind**

![COVER](./.github/assets/cover.png)

## Techs

- [Next.js](https://nextjs.org/) - The React Framework for Production.

- [Tailwindcss](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.

- [Radix UI](https://www.radix-ui.com/) - A collection of open source UI components for React to accessibility.

- [Framer Motion](https://www.framer.com/motion/) - A production-ready motion library for React.

- [Lucide React](https://lucide.dev/guide/packages/lucide-react) - A simply beautiful open source icons.

- [Auto Animate](https://auto-animate.formkit.com/) - A tool to create animations with Framer Motion.

- [Tailwind Variants](https://www.tailwind-variants.org/) - A tool to create custom variants for Tailwindcss.

- [Tailwind Merge](https://github.com/dcastil/tailwind-merge) - A tool to merge Tailwindcss classes.

## Running

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

```bash

npm ci

```

Then, run the development server:

```bash

npm run dev

```

Open [http://localhost:3000](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