Standard Operating Procedures

turborepo.md

Turborepo

Creating a new app with tailwindcss

1. cd apps
2. npx create-next-app@latest
3. Add globals.css inside apps
4. Change .eslintrc.json to .eslintrc.js

module.exports = {
  root: true,
  extends: ["custom"],
};

5. Delete .gitignore (only keep one global file)
6. Update package.json to import from local packages
   1. dependencies
      1. "ui": "*"
   2. devDependencies
      1. "eslint-config-custom": "*",
      2. "tailwind-config": "*",
      3. "tsconfig": "*",
7. Update tailwind.config.js to include files to compile

/** @type {import('tailwindcss').Config} */
const sharedConfig = require('tailwind-config');

module.exports = {
  ...sharedConfig,
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    '../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}'
  ]
}

8. Update next.config.js to include files to transpile

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["ui", "tailwind-config"],
}

module.exports = nextConfig

9. Update tsconfig.json

{
	"extends": "tsconfig/nextjs.json",
	"compilerOptions": {
		"plugins": [
			{
				"name": "next"
			}
		],
		"paths": {
			"@/*": ["./*"]
		}
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
	"exclude": ["node_modules"]
}