Skip to content

Commit

Permalink
Enable CSS nesting syntax by default when using Tailwind (#10116)
Browse files Browse the repository at this point in the history
I don't think this plugin existed when we first created the Tailwind UI
setup command, but it does now, and is super handy!

This lets you use [nested CSS
syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting)
in your `index.css` right after you install Tailwind.

Trying to nest without this plugin seems to work in development, but
you'll get a warning message in the console each time you save your
`.css` file.

```css
.button {
  @apply flex items-center px-4 py-2;

  .icon {
    @apply w-4 h-4;
  }

  span {
    @apply text-sm;
  }
}
```
  • Loading branch information
cannikin committed Mar 7, 2024
1 parent 06693cc commit 6b81681
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 0 deletions.
17 changes: 17 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
# CHANGELOG

- feature: Enable [CSS nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) syntax by default when using Tailwind:

```
.button {
@apply p-2 font-semibold bg-gray-500;
&:hover {
@apply bg-red-500;
}
.icon {
@apply w-4 h-4;
}
span {
@apply text-sm;
}
}
```

## Unreleased

## v7.1.0
Expand Down
1 change: 1 addition & 0 deletions __fixtures__/test-project/web/config/postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const path = require('path')

module.exports = {
plugins: [
require('tailwindcss/nesting'),
require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
require('autoprefixer'),
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const path = require('path')

module.exports = {
plugins: [
require('tailwindcss/nesting'),
require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
require('autoprefixer'),
],
Expand Down

0 comments on commit 6b81681

Please sign in to comment.