tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
82.02k stars 4.15k forks source link

The param `addBase` api of plugin functions does not work for `class css style` #11134

Closed hai-x closed 1 year ago

hai-x commented 1 year ago

What version of Tailwind CSS are you using? ^3.3.2

What build tool (or framework if it abstracts the build tool) are you using? "vite": "^4.3.2"

What version of Node.js are you using? v16.15.0

What browser are you using? Chrome version: 112.0.5615.137 For example: Chrome, Safari, or N/A

What operating system are you using? macOS

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

The param addBase api of plugin functions does not work with html.dark but work with html#dark

image image

the code is like:

plugins: [
    plugin(function ({ addBase }) {
      addBase({
        'html.dark': {
          background: 'black'
        }
      })
    })
  ] 
adamwathan commented 1 year ago

Hey! This works as expected for me, as long as the dark class is present in one of your templates somewhere to make sure Tailwind knows the rule needs to be generated:

image

If you still have issues here please open a new issue that includes a proper reproduction as per the issue template and we can take a closer look 👍