Troubleshooting Tailwind Issues in PagesJS 1.0.0 | Yext Hitchhikers Platform

PagesJS 1.0.0 introduced Vite 5. Vite’s stance on the CommonJS (CJS)/ECMAScript modules (ESM) ecosystem is that ESM is the future. While Vite tries to automatically convert CJS to ESM, each release has gotten stricter about how it handles module resolution. If you’re running into CJS errors due to your Tailwind config, we recommend converting to the ESM version by following this guide.

1. Upgrade Tailwind

This blog outlines the various improvements that were introduced in Tailwind 3.3 including ESM/TS support (there is now a Tailwind 3.4 ). To update Tailwind to the latest version, run the following command:

npm install -D tailwindcss@latest

Next, rename your Tailwind config file to tailwind.config.ts. Then, update your file to look like the following:

import type { Config } from 'tailwindcss'

export default {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
    // any other files you wish to apply Tailwind to
  ],
  theme: {
    extend: {
      // keep any existing theme extensions
    },
  },
  plugins: [
    // keep any existing plugins
  ],
} satisfies Config

2. Update PostCSS

Your PostCSS configuration file is likely a CJS module and needs to be converted to ES modules. Rename your PostCSS configuration file to postcss.config.js. You will also need to change how you export the configuration:

import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

3. Add Tailwind in Vite Configuration (Optional)

In rare cases, you may need to reference your Tailwind configuration values in your React code using Tailwind’s resolveConfig utility. To make sure you can properly import the Tailwind configuration into your .tsx files, add the following to your vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import yextSSG from "@yext/pages/vite-plugin";

export default defineConfig({
  plugins: [react(), yextSSG()],
  alias: {
    "tailwind.config.js": path.resolve(__dirname, "tailwind.config.ts"),
   },
  // add your tailwind configuration to the optimizeDeps.include list
  optimizeDeps: {
    include: ["tailwind.config.js"],
  },
});

Back

< Modules

Implement Yext Analytics >

Feedback

<% elem.innerText %>