tailwindcss/packages/tailwindcss
Philipp Spiess dd85aadc2c
Reintroduce container component as a utility (#14993)
Closes #13129

We're adding back the v3 `container` component, this time as a utility.
The idea is that we support the default `container` behavior but we will
not have an API to configure this similar to what v3 offered. Instead,
the recommended approach is to configure it by creating a custom utility
like so:

```css
@import "tailwindcss";

@utility container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
```

We do have an idea of how to migrate existing JS configuration files to
the new `@utility` as part of the interop layer and the codemod. This is
going to be a follow-up PR though.

## Test Plan

We added a unit test but we've also played around with it in the Vite
playground. Yep, looks like a `container`:


https://github.com/user-attachments/assets/ea7a5a4c-4cde-4ef5-9062-03e16239eb85

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2024-11-13 13:39:20 -05:00
..
src Reintroduce container component as a utility (#14993) 2024-11-13 13:39:20 -05:00
tests Rename --line-height-* variables to --leading-* (#14925) 2024-11-08 20:00:30 +01:00
index.css introduce v4 codebase 2024-03-05 14:29:15 +01:00
package.json Prepare v4.0.0-alpha.33 release (#14967) 2024-11-11 20:28:41 -05:00
playwright.config.ts Only apply hover on devices that support hover (#14500) 2024-09-24 11:43:57 -04:00
preflight.css Don't reset horizontal padding on date/time pseudo-elements (#14959) 2024-11-11 13:11:28 -05:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
theme.css Sort theme variables in a more intentional order (#14952) 2024-11-11 10:08:49 -05:00
tsconfig.json introduce v4 codebase 2024-03-05 14:29:15 +01:00
tsup.config.ts Throw a useful error when tailwindcss is used as a PostCSS plugin (#14378) 2024-09-11 17:02:24 +02:00
utilities.css introduce v4 codebase 2024-03-05 14:29:15 +01:00
vitest.config.ts Add integration test setup and tests for the Vite integration (#14089) 2024-08-02 11:50:49 +02:00

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.

Build Status Total Downloads Latest Release License


Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.