ReactJS + Vite boilerplate to be used with Tailwindcss.

  • By João Paulo Moraes
  • Last update: Dec 22, 2022
  • Comments: 3

React Tailwindcss Boilerplate build with Vite

This is a ReactJS + Vite boilerplate to be used with Tailwindcss.

What is inside?

This project uses many tools like:

Getting Started

Install

Create the project.

npx degit joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate my-app

Access the project directory.

cd my-app

Install dependencies.

npm install

Serve with hot reload at http://localhost:3000.

npm run dev

Lint

npm run lint

Build

npm run build

Test

npm run test

License

This project is licensed under the MIT License.

Github

https://github.com/joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate

Comments(3)

  • 1

    Add react types

    Otherwise linter will throw this error: Cannot find module 'react/jsx-runtime' or its corresponding type declarations

    I haven't seen this affecting pnpm dev but the error shows up in text editor (by the virtue of LSP I suppose)

  • 2

    False linter error on vscode

    Hi!

    I don't think this is a Bug, but a local problem. My vscode linter claims that, for example

    import Avatar from 'components/Avatar' Cannot find module 'components/Avatar' or its corresponding type declarations

    But the dev server works well.

    It's that an tsconfig.json issue?

  • 3

    Resolved default import

    Problem: Remove default of export in app.tsx for follow the pattern of importation, and import named import { App } from Explaining: When exporting by default can't change the name's component in importation, then, if change the name in component should be changed in importation too, however, if export without default, you can change the name of importation component facilitating a refactoring of code.