chore(devex): tailwind v4 (via CLI) + upgrade guide for tailwind v4 (#29562)

Co-authored-by: Marius Andra <marius.andra@gmail.com>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Lucas Ricoy <2034367+lricoy@users.noreply.github.com>
Co-authored-by: Robbie <robbie.coomber@gmail.com>
Co-authored-by: Dylan Martin <dylan@posthog.com>
Co-authored-by: Haven <haven@posthog.com>
Co-authored-by: Paul D'Ambra <paul@posthog.com>
Co-authored-by: Paweł Szczur <orian@users.noreply.github.com>
Co-authored-by: Ben White <ben@posthog.com>

.dockerignore

@@ -7,6 +7,7 @@
 !common/eslint_rules
 !common/plugin_transpiler/*.*
 !common/plugin_transpiler/src
+!common/tailwind
 !dags
 !ee
 !frontend/@posthog

.gitignore

@@ -46,6 +46,7 @@ celerybeat.pid
 common/hogvm/typescript/.parcel-cache
 common/hogvm/typescript/dist
 common/plugin_transpiler/dist
+common/tailwind/dist
 coverage-*.xml
 cypress/**/*.diff.png
 cypress/downloads/

.stylelintignore

@@ -1 +0,0 @@
-frontend/dist/

Dockerfile

@@ -26,13 +26,14 @@ WORKDIR /code
 SHELL ["/bin/bash", "-e", "-o", "pipefail", "-c"]
 
 COPY turbo.json package.json pnpm-lock.yaml pnpm-workspace.yaml tsconfig.json ./
-COPY frontend/package.json frontend/tailwind.config.js frontend/
+COPY frontend/package.json frontend/
 COPY frontend/bin/ frontend/bin/
 COPY bin/ bin/
 COPY patches/ patches/
 COPY common/hogvm/typescript/ common/hogvm/typescript/
 COPY common/esbuilder/ common/esbuilder/
 COPY common/eslint_rules/ common/eslint_rules/
+COPY common/tailwind/ common/tailwind/
 COPY products/ products/
 COPY ee/frontend/ ee/frontend/
 RUN --mount=type=cache,id=pnpm,target=/tmp/pnpm-store \

common/esbuilder/utils.mjs

@@ -14,7 +14,6 @@ import fse from 'fs-extra'
 import * as path from 'path'
 import postcss from 'postcss'
 import postcssPresetEnv from 'postcss-preset-env'
-import tailwindcss from 'tailwindcss'
 import ts from 'typescript'
 
 const defaultHost = process.argv.includes('--host') && process.argv.includes('0.0.0.0') ? '0.0.0.0' : 'localhost'
@@ -85,7 +84,7 @@ export function copyIndexHtml(
         window.ESBUILD_LOAD_CHUNKS('index');
     `
 
-    // Snippet to dynamically load the css based on window.JS_URL
+    // Modified CSS loader to handle both files
     const cssLoader = `
         const link = document.createElement("link");
         link.rel = "stylesheet";
@@ -140,8 +139,7 @@ export const commonConfig = {
     plugins: [
         sassPlugin({
             async transform(source, resolveDir, filePath) {
-                // Sync the plugins list with postcss.config.js
-                const plugins = [tailwindcss, autoprefixer, postcssPresetEnv({ stage: 0 })]
+                const plugins = [autoprefixer, postcssPresetEnv({ stage: 0 })]
                 if (!isDev) {
                     plugins.push(cssnano({ preset: 'default' }))
                 }
@@ -362,8 +360,6 @@ export async function buildOrWatch(config) {
     }
 
     if (isDev) {
-        const tailwindConfigJsPath = path.resolve(absWorkingDir, '../tailwind.config.js')
-
         chokidar
             .watch(
                 [
@@ -372,7 +368,6 @@ export async function buildOrWatch(config) {
                     path.resolve(absWorkingDir, '../common'),
                     path.resolve(absWorkingDir, '../products/*/manifest.json'),
                     path.resolve(absWorkingDir, '../products/*/frontend/**/*'),
-                    tailwindConfigJsPath,
                 ],
                 {
                     ignored: /.*(Type|\.test\.stories)\.[tj]sx?$/,
@@ -389,11 +384,11 @@ export async function buildOrWatch(config) {
                     gatherProductManifests()
                 }
 
-                if (inputFiles.has(filePath) || filePath === tailwindConfigJsPath) {
-                    if (filePath.match(/\.tsx?$/) || filePath === tailwindConfigJsPath) {
+                if (inputFiles.has(filePath)) {
+                    if (filePath.match(/\.tsx?$/)) {
                         // For changed TS/TSX files, we need to initiate a Tailwind JIT rescan
                         // in case any new utility classes are used. `touch`ing `base.scss` (or the file that imports tailwind.css) achieves this.
-                        await touchFile(path.resolve(absWorkingDir, 'src/styles/base.scss'))
+                        await touchFile(path.resolve(absWorkingDir, '../common/tailwind/tailwind.css'))
                     }
                     void debouncedBuild()
                 }

common/storybook/tailwind.config.js

@@ -1,5 +1,7 @@
-const config = require('../../frontend/tailwind.config.js') // eslint-disable-line no-undef
-module.exports = { // eslint-disable-line no-undef
+// eslint-disable-next-line no-undef
+const config = require('../../frontend/tailwind.config.js') 
+// eslint-disable-next-line no-undef
+module.exports = { 
     ...config,
     content: config.content.map((path) => path.replace('../', '../../'))
 }

common/storybook/turbo.json

@@ -7,6 +7,9 @@
         },
         "prepare": {
             "dependsOn": ["@posthog/frontend#prepare"]
+        },
+        "start": {
+            "dependsOn": ["@posthog/frontend#prepare"]
         }
     }
 }

common/tailwind/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@posthog/tailwind",
+    "scripts": {
+        "build": "pnpm dlx @tailwindcss/cli -i ./tailwind.css -o ./dist/tailwind.css",
+        "start": "pnpm dlx @tailwindcss/cli -i ./tailwind.css -o ./dist/tailwind.css --watch"
+    },
+    "dependencies": {
+        "tailwindcss": "4.0.7",
+        "@tailwindcss/container-queries": "^0.1.1"
+    },
+    "devDependencies": {
+        "@tailwindcss/cli": "^4.0.7"
+    },
+    "peerDependencies": {}
+}

common/tailwind/tailwind.config.js

@@ -308,15 +308,14 @@ const deprecatedColors = {
 
 const config = {
     content: [
-        // Starting all paths with '.." to share this between frontend/, cypress/, playwright/ and common/storybook/
-        // Update common/storybook/tailwind.config.js if you change this
-        '../frontend/src/**/*.{ts,tsx}',
-        '../ee/frontend/**/*.{ts,tsx}',
-        '../frontend/src/index.html',
-        '../products/**/frontend/**/*.{ts,tsx}',
-        '../common/**/src/**/*.{ts,tsx}',
-        '../common/**/frontend/**/*.{ts,tsx}',
-        '!../frontend/src/**/*Type.ts',
+        // Starting all paths with '../.." to share this between frontend/, cypress/, playwright/ and common/storybook/
+        '../../frontend/src/**/*.{ts,tsx}',
+        '../../ee/frontend/**/*.{ts,tsx}',
+        '../../frontend/src/index.html',
+        '../../products/**/frontend/**/*.{ts,tsx}',
+        '../../common/**/src/**/*.{ts,tsx}',
+        '../../common/**/frontend/**/*.{ts,tsx}',
+        '!../../frontend/src/**/*Type.ts',
     ],
     darkMode: ['selector', '[theme="dark"]'],
     important: true,
@@ -787,15 +786,13 @@ const config = {
             const newUtilities = {};
 
             // Standard spacing utilities for backwards compatibility
-            for (const [key, value] of Object.entries(spacing)) {
-                const safeKey = key.toString().replace('.', '_');
-                
-                newUtilities[`.deprecated-space-y-${safeKey} > :not([hidden]) ~ :not([hidden])`] = {
+            for (const [key, value] of Object.entries(spacing)) {                
+                newUtilities[`.deprecated-space-y-${key} > :not([hidden]) ~ :not([hidden])`] = {
                     '--tw-space-y-reverse': '0',
                     'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
                     'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
                 };
-                newUtilities[`.deprecated-space-x-${safeKey} > :not([hidden]) ~ :not([hidden])`] = {
+                newUtilities[`.deprecated-space-x-${key} > :not([hidden]) ~ :not([hidden])`] = {
                     '--tw-space-x-reverse': '0',
                     'margin-right': `calc(${value} * var(--tw-space-x-reverse))`,
                     'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,

common/tailwind/tailwind.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+
+/* if this shows a warning, cahnge the type of file in vscode to 'tailwind CSS' */
+@config "./tailwind.config.js";

common/tailwind/turbo.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "https://turbo.build/schema.json",
+    "extends": ["//"],
+    "tasks": {
+        "build": {
+            "cache": false
+        }
+    }
+}

cypress/tailwind.config.js

@@ -1,2 +1,4 @@
-const baseConfig = require('../frontend/tailwind.config.js') // eslint-disable-line no-undef
-module.exports = baseConfig // eslint-disable-line no-undef
+// eslint-disable-next-line no-undef
+const baseConfig = require('../frontend/tailwind.config.js')
+// eslint-disable-next-line no-undef
+module.exports = baseConfig

frontend/.stylelintignore

@@ -0,0 +1,2 @@
+../frontend/dist/
+../common/tailwind/dist/

frontend/.stylelintrc.js

@@ -43,7 +43,7 @@ module.exports = {
         'scss/at-rule-no-unknown': [
             true,
             {
-                ignoreAtRules: ['tailwind'],
+                ignoreAtRules: ['tailwind', 'config'],
             },
         ],
         'scss/operator-no-newline-after': null, // Doesn't always play well with prettier