]> source.dussan.org Git - gitea.git/commit
enable tailwind nesting (#29746)
authorRafael Heard <rafael.heard@gmail.com>
Thu, 14 Mar 2024 18:20:54 +0000 (14:20 -0400)
committerGitHub <noreply@github.com>
Thu, 14 Mar 2024 18:20:54 +0000 (19:20 +0100)
commit03753cbc0ff68cc4eee0a65b556e6d86a8f1c63f
tree10cda3e7e3c9d77434e375d625780ae07a0ce15a
parent487ac9bf6c239ce897f1a2f6c4321d6f1769a22f
enable tailwind nesting (#29746)

Currently, if you implement native CSS nesting within a Vue component a
warning will appear in the terminal. It states
`Nested CSS was detected, but CSS nesting has not been configured
correctly.
Please enable a CSS nesting plugin *before* Tailwind in your
configuration.` To fix this error we need to enable the built-in
[tailwinds nesting
config](https://tailwindcss.com/docs/using-with-preprocessors#nesting).

Example code to trigger the warning within a vue component:

```CSS
<style>
.example {
  &:hover,
  &:focus-visible {
    color: var(--color-text);
  }

  & svg {
    margin-right: 0.78rem;
  }
}
</style>
```

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
package-lock.json
package.json
webpack.config.js