custom classes from a global.css not found

[denu5]

say we import in app.tsx import '../styles/global.css';

@layer base {

    /* inspiration https://tailwindcss-typography.netlify.app/ */
    .prose {
        h1, .h1 {
            @apply font-serif font-bold;           

should i expect this to work? currently i get ✕ prose was not found

i assume it's going into this direction: #338

[ben-rogerson]

Instead of using @layer, add the prose class in a global provider from your css-in-js library and apply className="prose" on your container.

[denu5]

okey, only to clarify => tw will never pick up those classes right?.. edit: which would make sense, as they don't exist in the tailwind.config

[ben-rogerson]

yeah thats right, twin won't pick up any classes defined in a global provider from your css-in-js library.

[denu5]

hi ben, thanks for your invididual support :) i hope a final question:

can the opposite work? meaning tailwind classes for regular className props?

did some experiments in your examples:

    <div tw="bg-electric text-white p-4 mb-4">styles appplied with tw</div>
    <div className="bg-electric text-white p-4 mb-4">styles appplied with className (no worky)</div>
    <div className={s.test}>styles appplied with postcss</div>

why am I asking? i'm tempted to introduce twin.macro into an existing project, however i can't rewrite all the classNames to tw now.

[ben-rogerson]

Twin can pluck tailwind classes from the className prop but you'll need to enable it.

In your twin config:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    includeClassNames: true,
  },
}

From the docs:

When a tailwind class is found in a className prop, it’s plucked out, converted and delivered to the css-in-js library.

• Unmatched classes are skipped and preserved within the className
• Suggestions aren’t shown for unmatched classes like they are for the tw prop
• The tw and css props can be used on the same jsx element
• Limitation: classNames with conditional props or variables aren’t touched, eg: <div className={isBlock && "block"} />

[denu5]

awesome works, thanks a lot! - shame on me for not reading the config options :)