Typescript + Jest + ESLint + Tailwind

.eslintignore

.next
__generated__

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-empty-interface": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { "argsIgnorePattern": "^_" }
    ],
    "@typescript-eslint/no-use-before-define": "off",
    "react/react-in-jsx-scope": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.prettierignore

.next
__generated__

css--tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

install.sh

yarn add tailwindcss postcss-import autoprefixer @fullhuman/postcss-purgecss

yarn add -D \
  eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react \
  prettier eslint-config-prettier eslint-plugin-prettier \
  jest @testing-library/jest-dom @testing-library/react ts-jest \
  lint-staged husky npm-run-all

jest.config.js

/* eslint-env node */
module.exports = {
  preset: "ts-jest/presets/js-with-ts",
  moduleFileExtensions: ["ts", "tsx", "js"],
  moduleNameMapper: {},
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  testMatch: ["**/__tests__/*.(ts|tsx)"],
  setupFilesAfterEnv: ["./jest.setup.ts"],
  testPathIgnorePatterns: ["./.next/", "./node_modules/"],
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.jest.json",
    },
  },
};

jest.setup.ts

import "@testing-library/jest-dom";

package.json

{
  "scripts": {
    "lint": "yarn codegen && npm-run-all -p lint:*",
    "lint:tsc": "tsc --noEmit",
    "lint:eslint": "eslint --ext .js,.ts,.tsx .",
    "lint:prettier": "prettier --check .",
    "fix": "prettier --write . && eslint --fix --ext .js,.ts,.tsx .",
    "test": "jest"
  },
    "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      "eslint --ext .js,.ts,.tsx --fix"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsc --noEmit && lint-staged && yarn test"
    }
  }
}

pages--_app.tsx

import { NextPage } from "next";

import "../css/tailwind.css";

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const App = ({
  Component,
  pageProps,
}: {
  Component: NextPage;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  pageProps: any;
}) => {
  return <Component {...pageProps} />;
};

export default App;

postcss.config.js

/* eslint-env node */
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    content: ["./components/**/*.js", "./pages/**/*.js"],
    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
    defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
  },
];
module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};

tailwind.config.js

/* eslint-env node */
module.exports = {
  theme: {
    extend: {},
  },
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "active"],
  },
  plugins: [],
};

tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.tsx",
    "**/*.ts",
    "*.ts",
    "**/*.js",
    "*.js",
    "next-env.d.ts"
  ],
  "exclude": ["node_modules", "dist", ".next", "out"]
}

tsconfig.jest.json

{
  "compilerOptions": {
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "target": "es5"
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
}