nrabhiram / vite-react-ts-tailwind-template

Boilerplate to quick-start development in TypeScript and TailwindCSS for React applications ⚛️

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

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

Tailwind + CSS Modules

1. Create a CSS Module file by following the naming convention - <Component>.module.css

2. 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;
   }

3. 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.