Vite React Typescript Tailwind Template

This template has been configured with all of the tools required to create a React Application using TypeScript and TailwindCSS with Vite.

Technologies

React
TypeScript
TailwindCSS for utility CSS classes
ESLint configured with some initial rules
Prettier to enforce consistent code style
Vitest for unit testing and code coverage
Vite to build the project for development or production
Husky 🐶 runs the full list of specs before committing your changes to ensure that you have a green build

Development

Setup

git clone https://github.com/nrabhiram/vite-react-ts-tailwind-template.git
Run npm install to install all of the project's dependencies
Build the project for production: npm run build
Run the local development server: npm run dev

Tailwind + CSS Modules

Create a CSS Module file by following the naming convention - <Component>.module.css
Use the @apply directive in your CSS class definitions to use Tailwind's utility classes into your own custom CSS
```
.app-heading {
    @apply text-5xl font-semibold mb-4;
}
```
Import the CSS Module file into the React component file

Dev Loop

prettier-format - run the autoformatter
lint - run the linter
test - run the specs
test-filter <spec-name> - run a specific spec
coverage - get a coverage report of the specs
build - build the project files for distribution
dev - run the local development server

Contributing

Feel free to open an issue or create a PR if you'd like to contribute 🙌

License

The project is available as open source under the terms of the MIT License.