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)