DEV Community

Manav Misra
Manav Misra

Posted on • Edited on

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
    }
  },
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

'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;
Enter fullscreen mode Exit fullscreen mode

'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: [],
};
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Read next

mridul037 profile image

𝗖𝗣𝗨 π—§π—΅π—Ώπ—Όπ˜π˜π—Ήπ—Άπ—»π—΄ 𝗢𝗻 π—žπ˜‚π—―π—²π—Ώπ—»π—²π˜π—²π˜€ ☸️

mridul037 -

khanrabiul profile image

React Router- Params

Khan Rabiul -

vc7 profile image

LeetCode in Swift - 1957. Delete Characters to Make Fancy String

vc7 -

igventurelli profile image

Deploying Spring Boot Applications to the Cloud: A Beginner's Guide

Igor Venturelli -