From 42328d0ae78123839e890eef642d3d76e3e08e57 Mon Sep 17 00:00:00 2001 From: Royer Adames Date: Sat, 22 Apr 2023 10:01:28 -0400 Subject: [PATCH 1/2] add pixels conversation --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 634ca32..36911bc 100644 --- a/README.md +++ b/README.md @@ -76,19 +76,19 @@ To stop an element from acting as a container, use the `@container-normal` class By default we ship with the following configured values: -| Name | CSS | -| ------ | ------------------------------- | -| `@xs` | `@container (min-width: 20rem)` | -| `@sm` | `@container (min-width: 24rem)` | -| `@md` | `@container (min-width: 28rem)` | -| `@lg` | `@container (min-width: 32rem)` | -| `@xl` | `@container (min-width: 36rem)` | -| `@2xl` | `@container (min-width: 42rem)` | -| `@3xl` | `@container (min-width: 48rem)` | -| `@4xl` | `@container (min-width: 56rem)` | -| `@5xl` | `@container (min-width: 64rem)` | -| `@6xl` | `@container (min-width: 72rem)` | -| `@7xl` | `@container (min-width: 80rem)` | +| Name | CSS | 1rem = 16px | +| ------ | ------------------------------- | ---------------------------------- | +| `@xs` | `@container (min-width: 20rem)` | 320px | +| `@sm` | `@container (min-width: 24rem)` | 384px | +| `@md` | `@container (min-width: 28rem)` | 448px | +| `@lg` | `@container (min-width: 32rem)` | 512px | +| `@xl` | `@container (min-width: 36rem)` | 576px | +| `@2xl` | `@container (min-width: 42rem)` | 672px | +| `@3xl` | `@container (min-width: 48rem)` | 768px | +| `@4xl` | `@container (min-width: 56rem)` | 896px | +| `@5xl` | `@container (min-width: 64rem)` | 1024px | +| `@6xl` | `@container (min-width: 72rem)` | 1152px | +| `@7xl` | `@container (min-width: 80rem)` | 1280px | You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file: From de8a3076862ab609a09243aec22d206d671af2f5 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 24 Apr 2023 15:26:14 +0200 Subject: [PATCH 2/2] inline pixel equivalent --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 36911bc..886f640 100644 --- a/README.md +++ b/README.md @@ -76,19 +76,19 @@ To stop an element from acting as a container, use the `@container-normal` class By default we ship with the following configured values: -| Name | CSS | 1rem = 16px | -| ------ | ------------------------------- | ---------------------------------- | -| `@xs` | `@container (min-width: 20rem)` | 320px | -| `@sm` | `@container (min-width: 24rem)` | 384px | -| `@md` | `@container (min-width: 28rem)` | 448px | -| `@lg` | `@container (min-width: 32rem)` | 512px | -| `@xl` | `@container (min-width: 36rem)` | 576px | -| `@2xl` | `@container (min-width: 42rem)` | 672px | -| `@3xl` | `@container (min-width: 48rem)` | 768px | -| `@4xl` | `@container (min-width: 56rem)` | 896px | -| `@5xl` | `@container (min-width: 64rem)` | 1024px | -| `@6xl` | `@container (min-width: 72rem)` | 1152px | -| `@7xl` | `@container (min-width: 80rem)` | 1280px | +| Name | CSS | +| ------ | -------------------------------------------- | +| `@xs` | `@container (min-width: 20rem /* 320px */)` | +| `@sm` | `@container (min-width: 24rem /* 384px */)` | +| `@md` | `@container (min-width: 28rem /* 448px */)` | +| `@lg` | `@container (min-width: 32rem /* 512px */)` | +| `@xl` | `@container (min-width: 36rem /* 576px */)` | +| `@2xl` | `@container (min-width: 42rem /* 672px */)` | +| `@3xl` | `@container (min-width: 48rem /* 768px */)` | +| `@4xl` | `@container (min-width: 56rem /* 896px */)` | +| `@5xl` | `@container (min-width: 64rem /* 1024px */)` | +| `@6xl` | `@container (min-width: 72rem /* 1152px */)` | +| `@7xl` | `@container (min-width: 80rem /* 1280px */)` | You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file: