1. Clone repository
2. cd into repository
3. Ensure you're running Node v18 or above
4. Run yarn
5. Run yarn start
6. Boom 💥 your app should be running in your browser

Steps I've taken to bootstrap this template with Tailwind CSS and Vite, I recommend going through this process on your own in a folder of your own in order to understand how we got here:

1. Step 1 under "Using React" BUT using yarn and TypeScript vite template

yarn add vite tailwind-playground -- --template react-ts
cd tailwind-playground

2. Step 2, but using yarn

yarn add tailwindcss -D postcss autoprefixer
npx tailwindcss init -p

3. Follow step as is

4. Follow step as is

5. Follow step as is

6. Follow step as is

7. Ran yarn dev

First and foremost, please provide feedback any time and as much as possible. I want to make this great, for you. To do that I need your help 💪🏻 GitHub issues is a good place to do so.

This seems obvious, but I highly recommend reading through the 6 items under "What to read next" on the installation screen (https://tailwindcss.com/docs/installation). You'll need an understanding of these concepts to effectively use and contribute to this project, and I don't feel like explaining what is already explained in extensive detail. This will guide you in building #worldclass software:

1. https://tailwindcss.com/docs/utility-first
2. https://tailwindcss.com/docs/responsive-design
3. https://tailwindcss.com/docs/hover-focus-and-other-states
4. https://tailwindcss.com/docs/dark-mode
5. https://tailwindcss.com/docs/reusing-styles
6. https://tailwindcss.com/docs/adding-custom-styles

After you've read through this content, I recommend adding the Tailwind intellisense extension to VS code. This has a variety of benefits as explained by them such as:

• Autocomplete. Intelligent suggestions for class names, as well as CSS functions and directives.
• Linting. Highlights errors and potential bugs in both your CSS and your markup.
• Hover Previews. See the complete CSS for a Tailwind class name by hovering over it.
• Syntax Highlighting. Provides syntax definitions so that Tailwind features are highlighted correctly.

Next up I'm going to try out the Tailwind + Prettier, do we wanna use this or our own prettier config?

• https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted