Tailwind CSS Bug Report: Custom Colors and Fonts Not Applying

This repository demonstrates an uncommon bug encountered when using custom colors and fonts in Tailwind CSS. Despite correctly defining custom colors and fonts within the tailwind.config.js file, these customizations do not always apply correctly to HTML elements.

Steps to Reproduce

1. Clone this repository.
2. Install dependencies: npm install
3. Run a development server (e.g., using Vite or Webpack).
4. Observe that the custom color theme-color and the custom font theme-font are not applied as expected in index.html.

Expected Behavior

The elements in index.html should be styled using the custom theme-color and theme-font defined in tailwind.config.js.

Actual Behavior

The custom color and font are not applied, and the default styles are used instead.

Possible Causes

• Typographical errors in the Tailwind CSS classes used.
• Incorrectly configured content array in tailwind.config.js preventing Tailwind from scanning for the custom styles.
• Conflicting CSS rules or styles from other sources overriding Tailwind's styling.
• Issues with the build process causing the custom styles to not be injected properly into the final CSS.
• Cache issues in Tailwind.

Workarounds

• Try restarting your development server or clearing your browser cache.
• Double-check for typographical errors in the Tailwind CSS classes.
• Carefully review your tailwind.config.js file to make sure the content array is properly defined and includes the relevant files that define the classes that will be using the custom styling.
• Try using a different build process or build tool.
• Check if other CSS files could be interfering.

This bug demonstrates a situation where custom styles may not apply correctly, even if the configurations seem accurate.