default apply class styles

[jim-king-2000]

HeroUI v3 defines a lot of styles, such as:

.table-root - Root container (named table-root instead of table because table is a built-in Tailwind CSS utility class for display: table)
.table__scroll-container - Horizontal scroll wrapper with custom scrollbar
.table__content - The <table> element
.table__header - Header row (<thead>)
.table__column - Column header cell (<th>)
.table__body - Body section (<tbody>)
.table__row - Row element (<tr>)
.table__cell - Data cell (<td>)
.table__footer - Footer container (outside table)

from https://heroui.com/docs/react/components/table#base-classes

Then I can use native tags with these styles: <table className='table-content'>

What if I need apply these styles defaultly?

// global.css

table {
  // just use table-content here
}

Then <table> would work the same as <table className='table-content'>.

How to write the css (using tailwindcss)?

[wongjn]

A pragmatic solution could be not to write any CSS. Rather, use React components to hide the implementation, so that it is like you are writing <table>:

function Table ({ className, ...props }) {
  return (
    <table className={`table__content ${className}`} {...props }/>
  );
}

function App() {
  return (
    <Table>
      …
    </Table>
  );
}

However, if you really did want a table CSS rule that is the same as table__content, you'd need to manually copy over the CSS from HeroUI.

[jim-king-2000]

Why not let this work?

table {
  @apply table-content;
}

[wongjn]

Tailwind is open source so you could fork it and get it to work 👍

[jim-king-2000]

OK, then. I'll try it.

[jim-king-2000]

from gemini:

To make @apply work with custom classes (like table-content) inside the @layer base block in Tailwind CSS v4/v5, you have to modify how the Design System handles candidate resolution.

In the new engine (written in Rust/TypeScript), Tailwind distinguishes between Utilities (which are known to the engine) and Plain CSS (which are just strings). By default, @apply only looks at Utilities.

If you were to modify the Tailwind source code (specifically the @tailwindcss/node or core package), here are the two logical paths to achieve this:

1. Modify the Candidate Matcher (The "Simple" Change)
   Tailwind's engine has a function (often in design-system.ts or similar) that validates if a class exists before applying it. To make your code work, you would modify the resolver to recursively check the CSS AST (Abstract Syntax Tree) for existing selectors.

The Logic Change:
Currently, the resolver says:

"Is table-content in my list of generated utilities? No? Throw error."

You would change it to:

"Is table-content in my list of utilities OR does it exist as a selector in the current CSS entry file? Yes? Inline those declarations."

2. Implementation: The apply Visitor
   In the Tailwind core, the @apply directive is handled by a "visitor" function that traverses your CSS. To make your specific example work, you would modify the visitor to look like this:

// Conceptual change to Tailwind Core's apply visitor
function handleApply(node, designSystem) {
  const className = node.params;

  // 1. Check if it's a built-in Tailwind utility (standard behavior)
  let rule = designSystem.resolve(className);

  // 2. THE CHANGE: Check if it's a user-defined class in the CSS
  if (!rule) {
    rule = designSystem.getUserDefinedClass(className); 
  }

  if (rule) {
    node.replaceWith(rule.nodes);
  } else {
    // Current behavior: fail
    throw node.error(`Cannot apply unknown utility: ${className}`);
  }
}

Is it a good solution?