Menu

Complete React 19 setup with SSR, CSR, TailwindCSS 4, and Jest using esbuild
📰
0

Complete React 19 setup with SSR, CSR, TailwindCSS 4, and Jest using esbuild

DEV Community: esbuild·Will Medina·about 1 month ago
#efhQt5ko
#dev#javascript#react#webdev#ssr#ededed
Reading 0:00
15s threshold

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 ).…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More