This is a continuation of my first blog post:

A Practical Guide to CSR and SSR with React 19 and esbuild

Will Medina ・ Dec 24 '24

#javascript #react #webdev #ssr

In this post I will extend the setup adding TailwindCSS for styling, Jest for unit testing.

Configuring TailwindCSS

To enable TailwindCSS we need to add PostCSS and write a small esbuild plugin to enable TailwindCSS in our css file.

First we'll need to install the following dependencies:

npm i --save-dev postcss tailwindcss @tailwindcss/postcss

Now lets create a esbuild plugin that we can add to our scripts to enable postcss and tailwindcss:

import { readFile } from ' node:fs/promises ' ; import postcss from ' postcss ' ; // esbuild Plugin to process css files with postcss export const postcssPlugin = ({ plugins = [] } = {}) => { return { name : ' postcss ' , setup ( build ) { build . onLoad ({ filter : / \. css$/ }, async ( args ) => { const raw = await readFile ( args . path , ' utf8 ' ); const source = await postcss ( plugins ).…