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.

• InfluxDB

  www.influxdata.com featured

  Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.

  

• precss

  2 1,608 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.

• 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 347 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,563 7.7 TypeScript

  💠 Speed up your Webpack with esbuild ⚡️

  

  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,138 124,648 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,790 227,038 10.0 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.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• purgecss

  52 7,756 8.0 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

  91 28,423 8.6 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