Speed up Next.js build with Typescript and Tailwind CSS

• tailwindcss-jit

  12 2,241 9.0 JavaScript
  

Enter @tailwindcss/jit, a drop-in replacement (though not with 100% feature parity yet) that collects the classes used by your files and only generates the requested classes.

• precss

  2 1,607 0.0 CSS

  Use Sass-like markup in your CSS

  

In this process, we had to get rid of two PostCSS plugins that were not updated to work with PostCSS 8, which is required by @tailwindcss/jit: precss and postcss-rtl, both of which are unmaintained and won't be updated.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• postcss-nesting

  4 439 7.1 CSS

  Discontinued Nest style rules inside each other

  

We replaced the former with postcss-nesting and rewritten the CSS to not use the rest of the features from precss - in our case, this was an easy job.

• tailwindcss-rtl

  1 345 0.0 JavaScript

  Enabling bidirectional support on tailwindcss framework

The latter was replaced by tailwindcss-rtl, which is instead a Tailwind plugin. It works great and requires very little effort, you just need to search and replace some non-RTL classes with RTL equivalents - which I expect to be easily swappable once Tailwind supports CSS Logical Properties.

• esbuild-loader

  14 3,519 7.8 TypeScript

  Webpack loader for esbuild: Speed up your build ⚡️

  

esbuild is a JS and TS bundler that promises ultra-fast build times. We use webpack, and there is support to leverage esbuild with esbuild-loader.

• Next.js

  2,040 120,313 10.0 JavaScript

  The React Framework

  

On a separate note, we haven't suffered from this out-of-memory situation since we made the switch, and it seems to be related with excessive amounts of CSS.

• React

  1,691 221,535 9.8 JavaScript

  The library for web and native user interfaces.

  

In the project I'm currently working with, we have a platform split between a single-page React app and a Next.js SSR website. The development server runs both in the same machine, using containers, but it has only one processor core and 2 GB of RAM.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• purgecss

  51 7,659 8.1 TypeScript

  Remove unused CSS

  

This has the benefit of not only reducing the load on the parser, but also generating a much smaller CSS file by default, even without minification: a drop from 17.2 MB to 461 KiB before PurgeCSS for the SPA, and from 110 KiB to 1.34 KiB for the Next.js website.

• PostCSS

  86 28,181 8.8 TypeScript

  Transforming styles with JS plugins

  

The big issue with Tailwind is that it pulls a huge amount of CSS classes into the parser, in the form of a 3.6 MB CSS file - or 6.0 MB if you enable dark mode. This is heavy on PostCSS, uses a lot of memory (our server would frequently trigger OOM kills).

Suggest a related project