Theo's Typesafe Cult•2y ago

How well can I rely on Tailwinds ability to know what classes to include in the CSS?

I'm new to Tailwind and I'm trying to understand how it works under the hood. More specifically how well can I rely on its "engine" to find all references to Tailwind classes in my source code to know which classes to include in the CSS that it generates? For example, will Tailwind work (include the correct classes in the generated CSS) in the following scenario?

const baseClassNames = "px-1 py-0.5"

const Component = ({green}) => {
  return <span className={clsx(baseClassNames, green && "text-green")}>Example</span>
}

const baseClassNames = "px-1 py-0.5"

const Component = ({green}) => {
  return <span className={clsx(baseClassNames, green && "text-green")}>Example</span>
}

The classes I would expect to be included in the generated CSS are px-1, py-0.5 and text-green. What about this scenario?

const baseClassNames = "px-1 py-0.5"
const getTextColor = (textColor) => `text-${textColor}`

const Component = ({textColor}) => {
  return <span className={clsx(baseClassNames, textColor && getTextColor(textColor))}>Example</span>
}

const baseClassNames = "px-1 py-0.5"
const getTextColor = (textColor) => `text-${textColor}`

const Component = ({textColor}) => {
  return <span className={clsx(baseClassNames, textColor && getTextColor(textColor))}>Example</span>
}

3 Replies

Pod•2y ago

First scenario will work, second wont. Tailwind looks for complete class names

DILJAMOP•2y ago

Okay. Thanks! So does it perform a simple search on each file to find the class names or is it a more intricate process that involves analyzing the AST? For example, if I write a complete class name in a comment or in an unused variable, will it still include that class name or will it know that it doesn't have to include that class name?

Unknown User•2y ago

Message Not Public

Gaming

Programming

How well can I rely on Tailwinds ability to know what classes to include in the CSS?