This project was my first interaction with Tailwind CSS, with the aim of familiarizing myself with the Framework. I used Nike's aesthetics as a reference for this project, trying to adapt an e-commerce in a different way, to explore the possibilities of the Framework. I know I still have a lot of room for improvement but I believe this was a good start.
- Dark and light themes
- Responsive UX/UI Design
- Front End structured in React
- Vite.Js framework for greater application agility
- Tailwind CSS for component customization
- Bag with addition and removal of items, allowing you to change their quantity and size
- Home page changes according to the selected item, changing its image, details and price
- Fixed navbar for greater comfort when navigating the application on mobile
Tailwind is a framework that has easy-to-use pre-defined classes, which eliminates the need to write custom CSS code absolutely and gives you the freedom to create reusable styles, making code creation and maintenance simple and effective. I learned the 'Mobile-First' approach that makes it easier to create responsive layouts . The possibility of customizing the Framework through the 'tailwind.conmfig.js' configuration file is a big difference, allowing precise adjustments when necessary. And the main thing that, in my opinion, makes Tailwind a unique Framework is the efficiency in defining styles, avoiding a huge, confusing and unnecessarily complex CSS file, making code maintenance and understanding infinitely simpler.
npm create vite@latest . -- --template react
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install react-icons
npm install @fontsource-variable/nunito