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
- Click 'Use This Template'
-
cloneit to your 💻 -
cdinto the new directory 📂 -
npm ito get all of the 'node_modules' built npm start- Open this spit up in VS Code
- 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.
- 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
- I have configured this to use Victor Mono font. But, u would have to install that yourself.
- For your
commits, I suggest considering using gitmoji. It's not only fun, but forces you to consider appropriatecommitmessages that describe '1 task.' - For a gr8 GUI for managing,
gitstuff, 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)