addBase will not work with vanilla class names

[willwill96]

What version of Tailwind CSS are you using?
3.4.4

What build tool (or framework if it abstracts the build tool) are you using?
Postcss, but my repro is using the tailwindcss cli

What version of Node.js are you using?
v18

What browser are you using?
N/A

What operating system are you using?
Windows/macOS

Reproduction URL
https://github.com/willwill96/tailwindcss-addBase-repro

Steps to reproduce:

1. npm install
2. npm run build:broken for the broken version
3. npm run build:working for the working version

Describe your issue

We are trying to use the addBase plugin to implement theming based on a parent class name, but it's not working, without a workaround.

What does not work:

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
      extend: {},
    },
    plugins: [plugin(({addBase})=>{
      addBase({
        '.theme-1': {
          color: 'red'
        }
      })
    })],
  }

After generating the css (using npm run build:broken), note nothing referencing .theme-1 is present in the output.css file.

What does work (as a workaround):

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
      extend: {},
    },
    plugins: [plugin(({addBase})=>{
      addBase({
        '[theme-1], .theme-1': {
          color: 'red'
        }
      })
    })],
  }

After generating the css (using npm run build:working), note the following is present in the output.css file:

[theme-1], .theme-1 {
  color: red;
}

This has the end result we are looking for which is applying css based on a parent class name, however, it adds unnecessary css that ultimately does not get used.

[wongjn]

I believe this works as designed. Tailwind only outputs class CSS rules if it sees the class name in any file content it is told to scan. In either version, the content covers no files, which means that no theme-1 string is found.

Thus, in the "broken" version, theme-1 is considered not needed and not added to the generated CSS.

Comparatively, in the work-around, the [theme-1] is an attribute selector. For this type of selector, Tailwind can't be sure whether it can remove this rule, so Tailwind generates the rule to be on the safe side.

You could consider one of:

• Ensuring the content file globs sufficiently cover code that uses Tailwind classes. If Tailwind comes across a theme-1 string in any of those files, it will generate the .theme-1 rule in the output CSS.
• Using the whitespace delimited attribute selector like [class~="theme-1"]. This is similar to your work-around but does the same job as the class selector. It is an attribute selector so Tailwind will generate it in the output CSS to be on the safe side.

[adamwathan]

Hey! As @wongjn mentioned what you're seeing here is Tailwind only generating classes it detects are used. Few options:

1. Safelist these classes:

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  safelist: ['theme-1'],
  plugins: [
    plugin(({ addBase }) => {
      addBase({
        '.theme-1': {
          color: 'red',
        },
      })
    }),
  ],
}

2. Use an attribute selector, which Tailwind will include unconditionally:

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(({ addBase }) => {
      addBase({
        '[class~="theme-1"]': {
          color: 'red',
        },
      })
    }),
  ],
}

3. Don't use a plugin for this, just put the rules in your CSS:

@tailwind base;

.theme-1 {
  color: red;
}

@tailwind components;
@tailwind utilities;

I'd probably go with option 3 personally, no reason to use Tailwind's plugin system at all when you don't actually need the features of the plugin system.