CRA + TS + Tailwind

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

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 🪁 and Ponicode 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 and added Tailwind CSS 💄

ESLint and Prettier have been configured for you based on various recommendations/standards.

'package.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 🪝

'package.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

{
  "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'.

You will see 👀 that I have started the process of recreating the default CRA app using only Tailwind.

'index.css' 📁

@tailwind base;
@tailwind components;
@tailwind utilities;

'App.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' 📁

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 imports 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 imports will be organized and any unused import will be removed 🔥.

Addl. Suggested Enhancements

1. I have configured this to use Victor Mono font. But, u would have to install that yourself.
2. For your commits, I suggest considering using gitmoji. 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. 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.