Monorepo with React, Typescript, Tailwind

The best Front-end stack for a web application now (Jul 2021)

If you are starting a new mid-sized project and can choose any front-end stack. What would you choose?

By looking at the title of the article you might have already figured out my answer. This article tells why I chose the MRTT stack and how to set it up.

Battle of big guns (React vs Angular vs Vue)

Prerequisites

Although this deserves another article on its own, I want to summarize why I choose to use React over others.

Simply put, the advantages of React overweigh the disadvantages.

Angular being great in itself works well for big teams. However, It is so strongly opinionated and heavy that it can sometimes become tedious to work with as a developer. So let’s rule out Angular. React, Vue being light and open, becomes best contenders to lay the foundation for any project. However, With Vue’s not being efficient to handle enterprise-level structure, complexities it rules itself out of the race.

Winner: React

What and Why a Monorepo?

With a great platform like React, we tend to create libraries. Having these libraries as different repos makes it harder to maintain and deployment can become cumbersome. With Monorepos all libraries, applications can use a single source for common components or modals which can save a lot of time and effort. With more and more emphasis on code quality, a review process is as important as testing itself. With Monorepo a reviewer is presented with all involved changes at once which again saves his time making the review process faster. Anything that saves time makes money in the software industry. So Monorepo = moolah.

Why Typescript?

React in itself is very strong, it is flexible, customizable, and easy to code. However, the code can become messy very soon with its single-file for template, css and js structure. As the number of developers in the team increases, it becomes very difficult to maintain code quality. Hence we bring in Typescript. Its strongly structural nature nurtures developers to be similar with their code while being different with logic. Better IntelliSense, Access to newer ES versions, use of Type interface, etc are like cherries on top of the cake.

Now setting Monorepo, React + Typescript is fairly simple. We will use Nx to do so. This is a great tool to create and manage your Monorepos, It provides templates for most programming languages. We will be using the one for React but with a small addition of Typescript.

Install Nx

npm i nx

Create Nx workspace with react + typescript app

npx create-nx-workspace --preset=react --template=typescript

Answer a few questions prompted and that’s it, your Monorepo with React + Typescript is ready. At this instance, you should be able to start your app by using npm run start.

Woohoo, it’s time for Tailwind?

Tailwind (Tailwind CSS) is a new styling library that is built with modern websites in mind, ie, componentization. It has an extensive list of classes and its ability to customize classes right in HTML makes it an obvious choice to use with React. It is lighter and I don’t think we need to offload responsiveness to a framework like Bootstrap anymore (thanks to Flexbox, Grid layout).

Adding Tailwind to your Monorepo and using it in your app

Install Tailwind and dependencies in your root folder

npm i tailwindcss autoprefixer postcss postcss-cli postcss-nested -D

Once done, we need to configure Tailwind for the application that will use it. There are 3 things to be done and order does not matter.

1. Create a file tailwind.config.js in your apps/{{ appName}} directory and copy the below contents to it, this file is where you can add Tailwind plugins and make customizations in the future.module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}','./public/../index.html'], darkMode: false, theme: { extend: {} }, variants: { extend: {} }, plugins: [], };
2. Create a file postcss.config.js in your apps/{{ appName}} directory and copy the below contents to it. This is to let Postcss know that we use Tailwindcss.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } };
3. Add the below lines to your apps/{{ appName }}/src/styles.scss file@tailwind base; @tailwind components; @tailwind utilities;
   
   Now you should be able to use Tailwind in your templates.
   Hurrah, MRTT stack setup is complete so go ahead commit the code.
   

References:

• Nx: https://nx.dev/
• Tailwind: https://tailwindcss.com/