README.md

ReactTS 18 with Tailwind CSS, ESLint, Prettier and Vite

This is a React + TypeScript + Tailwind CSS boilerplate to be built with Vite. It also includes ESLint 8, Vitest, Husky and a pre-commit hook that runs prettier --write and eslint --fix.

What's inside?

• Vite
• React 18
• TypeScript
• @vitejs/plugin-react-swc uses SWC for Fast Refresh
• ESLint 8
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-react-refresh
  • typescript-eslint
  • eslint-plugin-tailwindcss
• @tanstack/react-router
• @tanstack/react-query
• @tanstack/react-table
• Tailwind CSS
• shadcn/ui
• Zod
• lucide
• Vitest
• Prettier
• Husky

---

Getting Started

Install

Install dependencies.

yarn

Serve with hot reload at http://localhost:{PORT}.

yarn dev

Other Commands

Prettier

yarn format

Lint

Run ESLint

yarn lint

Run ESLint and fix

yarn lint:fix

Build

yarn build

Test

yarn test

Commit commands

This project will use commitlint to ensure that commit messages are Conventional Commits specification compliants.

To help you build more efficient commit messages, you will use the commitizen package by running this command :

yarn cz

---

shadcn/ui

Adding Components

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

npx shadcn-ui@latest add button

Adding new colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file. More info

app/globals.css

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
};

You can now use the warning utility class in your components.

<div className="bg-warning text-warning-foreground" />

---

Recommended VS Code extensions

• ESLint
• Prettier

Husky

Workaround for Node Version Managers and GUIs

# ~/.config/husky/init.sh

export NVM_DIR=~/.nvm

#source $(brew --prefix nvm)/nvm.sh # This loads nvm with brew.sh
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # or this loads nvm

#exit 1 # test hook without committing

ESLint version 9+

• Tracking: Flat Config support

Open issues

• eslint-plugin-react-hooks & "Flat Config" (ESLint 9) #28313
• -BUG- Support eslint's new config file (flat) for recommended rules #280