Using Tailwindcss V3 and Shadcn/ui V2 in Frappe/ERPNext Ecosystem

App.jsx

// translation_tools/public/js/translation_tools/App.jsx

import * as React from 'react';
import '../../css/tailwind.css';
import { Button } from '@/components/ui/button';

export function App() {
  return (
    <main className="tw">
      <div className="tw-m-4">
        <h3 className="tw-text-blue-500">Test Tailwindcss</h3>
        <h4>
          Start editing at translation_tools/public/js/translation_tools/App.jsx
        </h4>
        <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
          <Button>Click me</Button>
        </div>
      </div>
    </main>
  );
}

components.json

// root folder
{
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "translation_tools/public/js/translation_tools/globals.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": "tw-"
  },
  "rsc": false,
  "tsx": false,
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "ui": "@/components/ui"
  },
  "iconLibrary": "lucide"
}

globals.css

/* translation_tools/public/js/translation_tools/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .tw {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .tw.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }

  :where(.tw) * {
    box-sizing: border-box;
  }
}

hooks.py

app_include_css = [
    "/assets/translation_tools/css/tailwind.css"
]

jsconfig.json

// root folder
{
    "compilerOptions": {
      "paths": {
        "@/*": ["./translation_tools/public/js/translation_tools/*"]
      }
    }
}
  

package.json

// root folder
{
  "name": "translation_tools",
  "version": "1.0.0",
  "description": "An AI-powered translation utility for ERPNext that helps translate PO files using advanced language models like OpenAI GPT and Anthropic Claude.",
  "main": "index.js",
  "scripts": {
    "tailwindcssbuild": "npx tailwindcss -i ./translation_tools/public/js/translation_tools/globals.css -o ./translation_tools/public/css/tailwind.css",
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "cd thai_translation_dashboard && yarn install",
    "dev": "yarn run tailwindcssbuild && cd thai_translation_dashboard && yarn dev",
    "build": "yarn run tailwindcssbuild && cd thai_translation_dashboard && yarn build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@radix-ui/react-slot": "^1.2.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.487.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "tailwind-merge": "^3.2.0",
    "tw-animate-css": "^1.2.5"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/container-queries": "^0.1.1",
    "@tailwindcss/typography": "^0.5.16",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwindcss": "3",
    "tailwindcss-animate": "^1.0.7",
    "tailwindcss-debug-screens": "2"
  }
}

postcss.config.js

// root folder
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

tailwind.config.js

// root folder
/** @type {import('tailwindcss').Config} */
const { fontFamily } = require('tailwindcss/defaultTheme');
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // darkMode: ['class'],
  prefix: 'tw-',
  content: [
    './translation_tools/public/js/translation_tools/**/*.{js,jsx,ts,tsx,html}',
  ],
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        card: 'hsl(var(--card))',
        'card-foreground': 'hsl(var(--card-foreground))',
        primary: 'hsl(var(--primary))',
        'primary-foreground': 'hsl(var(--primary-foreground))',
        secondary: 'hsl(var(--secondary))',
        'secondary-foreground': 'hsl(var(--secondary-foreground))',
        muted: 'hsl(var(--muted))',
        'muted-foreground': 'hsl(var(--muted-foreground))',
        accent: 'hsl(var(--accent))',
        'accent-foreground': 'hsl(var(--accent-foreground))',
        destructive: 'hsl(var(--destructive))',
        'destructive-foreground': 'hsl(var(--destructive-foreground))',
        popover: 'hsl(var(--popover))',
        'popover-foreground': 'hsl(var(--popover-foreground))',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        sans: ['var(--font-sans)', ...fontFamily.sans],
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.foreground'),
            a: { color: theme('colors.primary') },
            h1: { color: theme('colors.foreground') },
            h2: { color: theme('colors.foreground') },
            h3: { color: theme('colors.foreground') },
            strong: { color: theme('colors.foreground') },
            code: { color: theme('colors.primary') },
            blockquote: {
              color: theme('colors.muted-foreground'),
              borderLeftColor: theme('colors.border'),
            },
          },
        },
        dark: {
          css: {
            color: theme('colors.foreground'),
            a: { color: theme('colors.primary') },
            h1: { color: theme('colors.foreground') },
            h2: { color: theme('colors.foreground') },
            h3: { color: theme('colors.foreground') },
            strong: { color: theme('colors.foreground') },
            code: { color: theme('colors.primary') },
            blockquote: {
              color: theme('colors.muted-foreground'),
              borderLeftColor: theme('colors.border'),
            },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('tailwindcss-animate'),
    require('tailwindcss-debug-screens'),
    // require('tailwindcss-children'),
  ],
};

utils.js

// translation_tools/public/js/translation_tools/lib/utils.js

import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

Reference:
https://github.com/NagariaHussain/doppio
https://v3.tailwindcss.com/docs/installation
https://www.npmjs.com/package/shadcn/v/2.3.0

commands:
yarn add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
yarn add -D tailwindcss@3 postcss autoprefixer prettier prettier-plugin-tailwindcss