README-CreateProjectInstallDependencies.md

Create React and Typescript project with Vite

pnpm create vite;

Choose react + Typescript + SWC template project.

Install and configure tailwindcss

1. install dependencies with pnpm add -D tailwindcss postcss autoprefixer;

2. Generate both tailwind.config.cjs and postcss.config.cjs with pnpm exec tailwindcss init -p;

3. Configure your template paths in tailwind.config.cjs file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

To add customized colors to tailwindcss pallete, use extend option above. Follow the example:

  ...
  theme: {
    extend: {
      colors: {
        backgroung: '#09090A',
      },
    },
  },
  ...

4. Add the Tailwind directives to your CSS global file @tailwind base; @tailwind components; @tailwind utilities;

5. Done! Start using Tailwind in your project.

Install and configure ESLint by @rocketseat

1. Install dependencies with pnpm add -D eslint @rocketseat/eslint-config;

2. Create a file called .eslintrc.json at root dir and put this on it:

{
  "extends": "@rocketseat/eslint-config/react"
}

3. Add the following script in package.json:

 "scripts": {
    ...
    "lint": "eslint src --ext .ts,.tsx"
  },
  ...

To check ESLint problems run pnpm lint, and add --fix to fix them.