tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

Go to file

Improve compatibility with @tailwindcss/typography and @tailwindcss/forms (#14221 )

This PR enables compatibility for the `@tailwindcss/typography` and
`@tailwindcss/forms` plugins. This required the addition of new Plugin
APIs and new package exports.

## New Plugin APIs and compatibility improvements

We added support for `addComponents`, `matchComponents`, and `prefix`.
The component APIs are an alias for the utilities APIs because the
sorting in V4 is different and emitting components in a custom `@layer`
is not necessary. Since `prefix` is not supported in V4, the `prefix()`
API is currently an identity function.

```js
 addComponents({
  '.btn': {
    padding: '.5rem 1rem',
    borderRadius: '.25rem',
    fontWeight: '600',
  },
  '.btn-blue': {
    backgroundColor: '#3490dc',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#2779bd',
    },
  },
  '.btn-red': {
    backgroundColor: '#e3342f',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#cc1f1a',
    },
  },
})
```

The behavioral changes effect the `addUtilities` and `matchUtilities`
functions, we now:

- Allow arrays of CSS property objects to be emitted:
  ```js
  addUtilities({
    '.text-trim': [
      {'text-box-trim': 'both'},
      {'text-box-edge': 'cap alphabetic'},
    ],
  })
  ```
- Allow arrays of utilities
  ```js
  addUtilities([
    {
      '.text-trim':{
        'text-box-trim': 'both',
        'text-box-edge': 'cap alphabetic',
      },
    }
  ])
  ```
- Allow more complicated selector names
  ```js
  addUtilities({
    '.form-input, .form-select, .form-radio': {
      /* styles here */
    },
    '.form-input::placeholder': {
      /* styles here */
    },
    '.form-checkbox:indeterminate:checked': {
      /* styles here */
    }
  })
  ```

## New `tailwindcss/color` and `tailwindcss/defaultTheme` export

To be compatible to v3, we're adding two new exports to the tailwindcss
package. These match the default theme values as defined in v3:

```ts
import colors from 'tailwindcss/colors'

console.log(colors.red[600])
```

```ts
import theme from 'tailwindcss/defaultTheme'

console.log(theme.spacing[4])
```

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

2024-08-22 08:06:21 -04:00

.github

Bump GitHub actions to latest version (#14182 )

2024-08-13 18:12:19 +02:00

crates

Improve Oxide scanner API (#14187 )

2024-08-16 15:05:42 +02:00

integrations

Improve compatibility with @tailwindcss/typography and @tailwindcss/forms (#14221 )

2024-08-22 08:06:21 -04:00

packages

Improve compatibility with @tailwindcss/typography and @tailwindcss/forms (#14221 )