CRA + TS + Tailwind
Published: 2020-12-27 02:10:22

**Update:** The code snippets below will not necessarily match what's in the repo, as I am always updating and improving things as I learn more. For example, `strict: true` is now set in 'tsconfig.json'...

[Create React App ➕ TypeScript ➕ Tailwind CSS Template Repo](https://github.com/manavm1990/react-ts-tailwinds)

## TLDR

1. Click 'Use This Template'
2. `clone` it to your 💻
3. `cd` into the new directory 📂
4. `npm i` to get all of the 'node_modules' built
5. `npm start`
6. Open this spit up in VS Code
7. **Strongly consider** installing all of the recommended VS Code extensions (see popup in bottom right) - you _might_ even want to install [Kite 🪁](https://www.kite.com/) and [Ponicode](https://www.ponicode.com/) for maximum benefit.
8. Make a 'components' directory and start working 👷🏾‍♂️.

## The Deets

This is set up and configured to minimize cognitive load 🧠, especially if you are a beginner. Intermediate/advanced devs will surely want to edit and configure this even more.

Well, as the name implies, we have used [Create React App's Typescript Template](https://create-react-app.dev/docs/adding-typescript/) and added [Tailwind CSS 💄](https://tailwindcss.com/)

[ESLint](https://eslint.org/) and [Prettier](https://eslint.org/) have been configured for you based on various recommendations/standards.

### 'package.json' 📁

```json
"eslintConfig": {
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": [
      "react-app",
      "react-app/jest",
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier",
      "prettier/@typescript-eslint",
      "prettier/react"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 12,
      "sourceType": "module"
    },
    "plugins": [
      "react",
      "@typescript-eslint"
    ],
    "rules": {
      "react/react-in-jsx-scope": 0
    }
  },
```

I have also included [Prettier's pre-commit hook 🪝](https://prettier.io/docs/en/precommit.html#option-1-lint-stagedhttpsgithubcomokonetlint-staged)

### 'package.json' 📁

```json
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }
```

TypeScript has been updated a bit from CRA's defaults. I have set it to use `"es6"` instead of `"es5"`.

### tsconfig.json

```json
{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "sourceMap": true,
    "declaration": true
  },
  "include": [
    "src/**/*"
  ],"exclude": ["node_modules", "build"]
}
```
I have also included [CRA's absolute import config with 'jsconfig.json'.](https://create-react-app.dev/docs/importing-a-component/#absolute-imports)

You will see 👀 that I have started the process of recreating the default CRA app using only [Tailwind.](https://tailwindcss.com/)

### 'index.css' 📁

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 'App.tsx' 📁

```tsx
import logo from "./logo.svg";

const App: React.FC = () => (
  <div className="text-center">
    <header className="bg-primary flex flex-col align-center justify-center text-10+2 min-h-screen text-white">
      <img
        src={logo}
        className="motion-safe:animate-spin-slow h-40-vmin pointer-events-none"
        alt="logo"
      />
      <p>
        Edit <code>src/App.tsx</code> and save to reload.
      </p>
      <a
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
        className="text-primary"
      >
        Learn React
      </a>
    </header>
  </div>
);

export default App;
```

### 'tailwind.config.js' 📁

```javascript
module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    backgroundColor: () => ({
      primary: "#282c34",
    }),
    extend: {
      animation: {
        "spin-slow": "spin 20s linear infinite",
      },
      height: {
        "40-vmin": "40vmin",
      },
    },
    fontSize: {
      "10+2": "calc(10px + 2vmin)",
    },
    textColor: () => ({
      primary: "#61dafb",
      white: "#fff",
    }),
  },
  variants: {
    animation: ["motion-safe"],
    extend: {},
  },
  plugins: [],
};
```

Appropriate VS Code settings are included 🦄 to take care of automating, linting, formatting and `import`s AMAP.

You may or may not like this behavior. Essentially, as soon as you finish editing a file  📁 and it loses focus, your code will be automatically linted and prettified, with all 'auto-fixes' 🔧 occurring immediately.

In addition, your `import`s will be organized and any unused `import` will be removed 🔥.

## Addl. Suggested Enhancements

1. I have configured this to use [Victor Mono font.](https://rubjo.github.io/victor-mono/) But, u would have to install that yourself.
2. For your `commit`s, I suggest considering using [gitmoji](https://gitmoji.dev/). It's not only fun, but forces you to consider appropriate `commit` messages that describe '1 task.'
3. For a gr8 GUI for managing, `git` stuff, try [GitKraken](https://www.gitkraken.com/invite/rDf2R8zP). This last one is a referral link, so appreciate if you all use that one. The free version is good enuff, but the $29/yr. paid version is probably worth it.

---

Interested in a video 📹 walkthrough? LMK in the comments, and maybe I can make one.