- Clone repository
cd
into repository- Ensure you're running Node v18 or above
- Run
yarn
- Run
yarn start
- 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:
Head over to https://tailwindcss.com/docs/guides/vite
- Step 1 under "Using React" BUT using yarn and TypeScript vite template
yarn add vite tailwind-playground -- --template react-ts
cd tailwind-playground
- Step 2, but using yarn
yarn add tailwindcss -D postcss autoprefixer
npx tailwindcss init -p
-
Follow step as is
-
Follow step as is
-
Follow step as is
-
Follow step as is
-
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:
- https://tailwindcss.com/docs/utility-first
- https://tailwindcss.com/docs/responsive-design
- https://tailwindcss.com/docs/hover-focus-and-other-states
- https://tailwindcss.com/docs/dark-mode
- https://tailwindcss.com/docs/reusing-styles
- 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?