This is a monorepo boilerplate powered by Turborepo.
You can also implement Monorepo with NX. It's boilerplate is HERE!
Run the following command:
npx create-turbo@latest -e with-tailwind
This Turborepo includes the following packages and apps:
web
: another Next.js app with Tailwind CSSui
: a stub React component library with Tailwind CSS, daiysiui and daiysiui-react shared by both web
applications@repo/eslint-config
: eslint
configurations (includes eslint-config-next
and eslint-config-prettier
)@repo/typescript-config
: tsconfig.json
s used throughout the monorepoEach package/app is 100% TypeScript.
This example is set up to produce compiled styles for ui
components into the dist
directory. The component .tsx
files are consumed by the Next.js apps directly using transpilePackages
in next.config.js
. This was chosen for several reasons:
tailwind.config.js
to apps and packages as easy as possible.tailwindcss
.ui
package uses a ui-
prefix for it's classes.Another option is to consume packages/ui
directly from source without building. If using this option, you will need to update the tailwind.config.js
in your apps to be aware of your package locations, so it can find all usages of the tailwindcss
class names for CSS compilation.
For example, in tailwind.config.js:
content: [
// app content
`src/**/*.{js,ts,jsx,tsx}`,
// include packages if not transpiling
"../../packages/ui/*.{js,ts,jsx,tsx}",
],
If you choose this strategy, you can remove the tailwindcss
and autoprefixer
dependencies from the ui
package.
This Turborepo has some additional tools already setup for you:
If you want to use this in the interim, you run the following command:
git clone https://github.com/MahdiTa97/turborepo-boilerplate
cd turborepo-boilerplate
yarn install
The NPM organization scope for this design system starter is @repo
. To change this, it's a bit manual at the moment, but you'll need to do the following:
packages/*
to replace repo
with your desired scoperepo
with your desired scopeyarn install