How to setup react, tailwind, webpack and typescript in a monorepo

Previously, we have created configuration for react, tailwind, webpack in monorepo using npm workspaces.

Now we will use typescript.

.
├── babel.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── Button.tsx
│   ├── Header.tsx
│   ├── index.css
│   └── index.ts
├── tailwind.config.js
├── tsconfig.json
└── webpack.config.js

Clone previous repo: https://github.com/ynwd/monorepo/tree/tailwind

install all typescript-react related packages

npm i typescript ts-loader @types/react-dom @types/react @babel/preset-typescript -D

npx tsc --init

update ts config

{
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

update babel config

module.exports = {
    presets: [
        "@babel/preset-react",
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
};

update webpack config

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== "production"

module.exports = {
    mode: devMode ? "development" : "production",
    entry: {
        index: { import: "./src/index.ts" }
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                loader: "ts-loader",
            },
            {
                test: /\.css$/i,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    'css-loader',
                    "postcss-loader",
                ],
            },
        ],
    },
    output: {
        filename: "components.bundle.min.js",
        library: 'fstrComponents',
        libraryTarget: 'umd',
        clean: true
    },
    plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
}

update tailwind config

module.exports = {
  purge: [
    './src/**/*.tsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

rename component extension

Button.js to Button.tsx
Header.js to Header.tsx
index.js to index.ts

compile

npm run build -w @fstr/component

Final source code: https://github.com/ynwd/monorepo/tree/typescript

Blog

How to setup react, tailwind, webpack and typescript in a monorepo

ynwd

Join Our Newsletter. No Spam, Only the good stuff.

Related