Tailwind CSS v4

[shon-button]

Description of the Tech Debt

Capturing information on Tailwind CSS v4.0 for possible upgrade when release is stable...

Goals for Tailwind CSS v4.0:

🤏 Simplify mental model, fewer framework-specific concepts 🪄 Less configuration, without less power ✂️ Fewer dependencies ⚡️ 10x faster Aggressively defend against complexity, double down on robustness and stability 🤝

Instruction for porting to Tailwindcss v4:

• Get next version of tailwindcss packages: yarn add tailwindcss@next @tailwindcss/postcss@next
• in client/tailwind.config.js remove content finder

  module.exports = {
  content: [
  "./app/**/*.{js,ts,jsx,tsx}",
  "./app/components/**/*.{js,ts,jsx,tsx}",
  ],

• in client/postcss.config.js
  change:

  module.exports = {
  plugins: {
  tailwindcss: {},
  autoprefixer: {},
  },
  };

  to:

  module.exports = {
  plugins: {
  @tailwindcss/postcss: {},
  },
  };

• in client/app/styles/globals.css change:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  to:

  @import "tailwindcss";

Tech Debt Triage

The purpose of our technical debt triage process is to analyze technical debt to determine risk level of the technical debt and the value in tackling that technical debt.

Risk Value Scoring:

Level	Value
High	3
Medium	2
Low	1

Technical Debt - Risk Types	Level	Value
Business Area Risk - Risk of business area visibility / damage to user experience
Developer Fault Risk - How likely will this tech debt cause a future error related to coding on top of it
System Fault Risk - Risk of system errors or application downtime
Time Scale Risk - Compound risk effect if left alone. How much more difficult to fix or dangerous will this become over time?
Time Sink Risk - How much will this tech debt slow the development process down
TOTAL SCORE:

[shon-button]

@marcellmueller ^ for your consideration