Speed up Next.js build with Typescript and Tailwind CSS

1. tailwindcss-jit

   1 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.

2. Sevalla

   sevalla.com featured

   Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

   

3. precss

   2 2 1,610 0.0 CSS

   Discontinued 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.

4. postcss-nesting

   3 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.

5. tailwindcss-rtl

   4 1 357 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.

6. esbuild-loader

   5 14 3,601 5.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.

7. Next.js

   6 2,381 134,062 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.

8. React

   7 1,970 238,455 9.9 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.

9. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

10. purgecss

    8 55 7,959 7.2 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.

11. PostCSS

    9 96 28,861 8.3 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