No description
Find a file
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
.github Add CODEOWNERS file (#14701) 2024-10-17 09:05:44 -04:00
crates Prepare v4.0.0-alpha.33 release (#14967) 2024-11-11 20:28:41 -05:00
integrations Vite: Don't track candidate changes for Svelte <style> tags (#14981) 2024-11-13 16:42:49 +01:00
packages Reintroduce container component as a utility (#14993) 2024-11-13 13:39:20 -05:00
patches Upgrade @parcel/watcher to 2.5.0 (#14978) 2024-11-13 11:38:43 +01:00
playgrounds Fix Vite playground warnings 2024-11-13 10:12:45 -05:00
scripts Fix integration tests on Windows (#14824) 2024-10-30 11:26:29 +00:00
.gitignore Add test.debug to integration tests (#14133) 2024-08-08 12:02:19 +02:00
.npmrc introduce v4 codebase 2024-03-05 14:29:15 +01:00
.prettierignore Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
Cargo.lock Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
Cargo.toml Hoist oxide/crates to just crates (#13333) 2024-03-23 09:00:48 -04:00
CHANGELOG.md Reintroduce container component as a utility (#14993) 2024-11-13 13:39:20 -05:00
LICENSE Add README, LICENSE, and CONTRIBUTING (#13088) 2024-03-05 14:45:39 -05:00
package.json Upgrade @parcel/watcher to 2.5.0 (#14978) 2024-11-13 11:38:43 +01:00
pnpm-lock.yaml Update @types/bun 1.1.11 → 1.1.13 (patch) (#14936) 2024-11-13 11:56:58 +01:00
pnpm-workspace.yaml Revert lightningcss change (#14919) 2024-11-08 09:58:00 -05:00
README.md Copy README file to every package (#13096) 2024-03-06 08:49:31 -05:00
rust-toolchain.toml Bring back rust-toolchain.toml (#14585) 2024-10-03 14:37:24 +00:00
turbo.json Auto source detection improvements (#14820) 2024-10-29 20:33:34 +00:00
vitest.workspace.ts introduce v4 codebase 2024-03-05 14:29:15 +01: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.