From d502f971b557cc5b93718d77eaa8fef77bdaccbf Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Tue, 24 Oct 2023 22:46:13 +0200
Subject: [PATCH 01/36] Updated packages.json

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 6b08cb7..6228c95 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "@tailwindcss/container-queries",
-  "version": "0.1.1",
+  "name": "@krzysztof318/container-queries",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
-  "repository": "https://github.com/tailwindlabs/tailwindcss-container-queries",
+  "repository": "https://github.com/Krzysztof318/tailwindcss-container-queries",
   "publishConfig": {
     "access": "public"
   },

From cdc663ffc5bb38f2dae5a4b606906215033110ed Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Tue, 24 Oct 2023 22:57:27 +0200
Subject: [PATCH 02/36] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6228c95..7cab5f6 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@krzysztof318/container-queries",
+  "name": "@krzysztof318/tw-container-queries",
   "version": "0.1.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

From 73aeb3e3dc8f65f7c5babf184a5f2e8c76fead81 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Tue, 24 Oct 2023 22:58:18 +0200
Subject: [PATCH 03/36] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f239b0a..6cd214b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.1.2] - 2023-10-24
+
+- Updated package.json after fork
+
 ## [0.1.1] - 2023-03-31
 
 ### Fixed

From e47f84112945392f9ee4061188e8a4deb523834b Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Tue, 24 Oct 2023 23:01:27 +0200
Subject: [PATCH 04/36] Delete .github/workflows/release-insiders.yml

---
 .github/workflows/release-insiders.yml | 50 --------------------------
 1 file changed, 50 deletions(-)
 delete mode 100644 .github/workflows/release-insiders.yml

diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml
deleted file mode 100644
index 4a91bf2..0000000
--- a/.github/workflows/release-insiders.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-name: Release Insiders
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14]
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Use cached node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('./package-lock.json') }}-${{ matrix.node-version }}
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build
-        run: npm run build
-
-      - name: Test
-        run: npm test
-
-      - name: Resolve version
-        id: vars
-        run: |
-          echo "SHA_SHORT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
-
-      - name: 'Version based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
-        run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version
-
-      - name: Publish
-        run: npm publish --tag insiders
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

From 70860f98ac66a3ed190e44182a6badefdb887ed1 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 19:36:19 +0200
Subject: [PATCH 05/36] Changed '@' to 'qc-'. Modified breakpoints. Updated
 package info after fork.

---
 CHANGELOG.md        |  19 ++------
 README.md           |  56 ++++++++++-----------
 package.json        |   2 +-
 src/index.ts        |  20 +++-----
 tests/index.test.ts | 115 +++++++++++++++++++++-----------------------
 5 files changed, 93 insertions(+), 119 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6cd214b..a10fb0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,23 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
-## [0.1.2] - 2023-10-24
+## [0.2.0] - 2023-10-25
 
 - Updated package.json after fork
-
-## [0.1.1] - 2023-03-31
-
-### Fixed
-
-- Ensure types are published to npm ([#11](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/11))
-
-## [0.1.0] - 2022-10-19
-
-### Added
-
-- Add new `@container`, `@container-normal` utilities.
-- Add new `@xs`, `@sm`, ..., `@[400px]`, variants.
+- Changed '@' to 'qc-'
+- Changed breakpoints to same as in tailwind
 
 [unreleased]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.1.1...HEAD
-[0.1.1]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.1.0...v0.1.1
-[0.1.0]: https://github.com/tailwindlabs/tailwindcss-container-queries/releases/tag/v0.1.0
diff --git a/README.md b/README.md
index 0538d51..6a9145d 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,15 @@
-# @tailwindcss/container-queries
+# @krzysztof318/tw-container-queries
 
 A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
+This is fork of original repo https://github.com/tailwindlabs/tailwindcss-container-queries
+I modificated prefix '@' to 'qc-' so now it works better with Razor syntax and I changed default breakpoints to same as tailwind breakpoints.
 
 ## Installation
 
 Install the plugin from npm:
 
 ```sh
-npm install @tailwindcss/container-queries
+npm install -D @krzysztof318/tw-container-queries
 ```
 
 Then add the plugin to your `tailwind.config.js` file:
@@ -19,7 +21,7 @@ module.exports = {
     // ...
   },
   plugins: [
-    require('@tailwindcss/container-queries'),
+    require('@krzysztof318/tw-container-queries'),
     // ...
   ],
 }
@@ -27,26 +29,26 @@ module.exports = {
 
 ## Usage
 
-Start by marking an element as a container using the `@container` class, and then applying styles based on the size of that container using the container variants like `@md:`, `@lg:`, and `@xl:`:
+Start by marking an element as a container using the `qc-container` class, and then applying styles based on the size of that container using the container variants like `qc-md:`, `qc-lg:`, and `qc-xl:`:
 
 ```html
-<div class="@container">
-  <div class="@lg:underline">
+<div class="qc-container">
+  <div class="qc-lg:underline">
     <!-- This text will be underlined when the container is larger than `32rem` -->
   </div>
 </div>
 ```
 
-By default we provide [container sizes](#configuration) from `@xs` (`20rem`) to `@7xl` (`80rem`).
+By default we provide [container sizes](#configuration) from `qc-sm` (`640px`) to `qc-2xl` (`1536px`).
 
 ### Named containers
 
-You can optionally name containers using a `@container/{name}` class, and then include that name in the container variants using classes like `@lg/{name}:underline`:
+You can optionally name containers using a `qc-container/{name}` class, and then include that name in the container variants using classes like `qc-lg/{name}:underline`:
 
 ```html
-<div class="@container/main">
+<div class="qc-container/main">
   <!-- ... -->
-  <div class="@lg/main:underline">
+  <div class="qc-lg/main:underline">
     <!-- This text will be underlined when the "main" container is larger than `32rem` -->
   </div>
 </div>
@@ -57,8 +59,8 @@ You can optionally name containers using a `@container/{name}` class, and then i
 In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value:
 
 ```html
-<div class="@container">
-  <div class="@[17.5rem]:underline"></div>
+<div class="qc-container">
+  <div class="qc-[17.5rem]:underline"></div>
     <!-- This text will be underlined when the container is larger than `17.5rem` -->
   </div>
 </div>
@@ -66,20 +68,20 @@ In addition to using one of the [container sizes](#configuration) provided by de
 
 ### Removing a container
 
-To stop an element from acting as a container, use the `@container-normal` class.
+To stop an element from acting as a container, use the `qc-container-normal` class.
 
-<div class="@container xl:@container-normal">
+<div class="qc-container xl:qc-container-normal">
   <!-- ... -->
 </div>
 
 ### With a prefix
 
-If you have configured Tailwind to use a prefix, make sure to prefix both the `@container` class and any classes where you are using a container query modifier:
+If you have configured Tailwind to use a prefix, make sure to prefix both the `qc-container` class and any classes where you are using a container query modifier:
 
 ```html
-<div class="tw-@container">
+<div class="tw-qc-container">
   <!-- ... -->
-  <div class="@lg:tw-underline">
+  <div class="qc-lg:tw-underline">
     <!-- ... -->
   </div>
 </div>
@@ -89,19 +91,13 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `@
 
 By default we ship with the following configured values:
 
-| 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 */)` |
+| Name     | CSS                                          |
+| -------- | -------------------------------------------- |
+| `qc-sm`  | `@container (min-width: 640px)`  |
+| `qc-md`  | `@container (min-width: 768px)`  |
+| `qc-lg`  | `@container (min-width: 1024px)`  |
+| `qc-xl`  | `@container (min-width: 1280px)`  |
+| `qc-2xl` | `@container (min-width: 1536px)`  |
 
 You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:
 
diff --git a/package.json b/package.json
index 7cab5f6..ad920d4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@krzysztof318/tw-container-queries",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
diff --git a/src/index.ts b/src/index.ts
index 84b9869..c502b3a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -13,7 +13,7 @@ export = plugin(
 
     matchUtilities(
       {
-        '@container': (value, { modifier }) => {
+        'qc-container': (value, { modifier }) => {
           return {
             'container-type': value,
             'container-name': modifier,
@@ -30,7 +30,7 @@ export = plugin(
     )
 
     matchVariant(
-      '@',
+      'qc-',
       (value = '', { modifier }) => {
         let parsed = parseValue(value)
 
@@ -68,17 +68,11 @@ export = plugin(
   {
     theme: {
       containers: {
-        xs: '20rem',
-        sm: '24rem',
-        md: '28rem',
-        lg: '32rem',
-        xl: '36rem',
-        '2xl': '42rem',
-        '3xl': '48rem',
-        '4xl': '56rem',
-        '5xl': '64rem',
-        '6xl': '72rem',
-        '7xl': '80rem',
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
       },
     },
   }
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 077b628..f5da801 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -7,29 +7,29 @@ it('container queries', () => {
       {
         raw: html`
           <div
-            class="@container @container-normal @container/sidebar @container-normal/sidebar @container-[size]/sidebar"
+            class="qc-container qc-container-normal qc-container/sidebar qc-container-normal/sidebar qc-container-[size]/sidebar"
           >
-            <div class="@md:underline"></div>
-            <div class="@md/container1:underline"></div>
-            <div class="@md/container2:underline"></div>
-            <div class="@md/container10:underline"></div>
-
-            <div class="@sm:underline"></div>
-            <div class="@sm/container1:underline"></div>
-            <div class="@sm/container2:underline"></div>
-            <div class="@sm/container10:underline"></div>
-
-            <div class="@lg:underline"></div>
-            <div class="@lg/container1:underline"></div>
-            <div class="@lg/container2:underline"></div>
-            <div class="@lg/container10:underline"></div>
-            <div class="@[1024px]:underline"></div>
-            <div class="@[1024px]/container1:underline"></div>
-            <div class="@[1024]/container1:underline"></div>
-
-            <div class="@[312px]:underline"></div>
-            <div class="@[200rem]:underline"></div>
-            <div class="@[123px]:underline"></div>
+            <div class="qc-md:underline"></div>
+            <div class="qc-md/container1:underline"></div>
+            <div class="qc-md/container2:underline"></div>
+            <div class="qc-md/container10:underline"></div>
+
+            <div class="qc-sm:underline"></div>
+            <div class="qc-sm/container1:underline"></div>
+            <div class="qc-sm/container2:underline"></div>
+            <div class="qc-sm/container10:underline"></div>
+
+            <div class="qc-lg:underline"></div>
+            <div class="qc-lg/container1:underline"></div>
+            <div class="qc-lg/container2:underline"></div>
+            <div class="qc-lg/container10:underline"></div>
+            <div class="qc-[1024px]:underline"></div>
+            <div class="qc-[1024px]/container1:underline"></div>
+            <div class="qc-[1024]/container1:underline"></div>
+
+            <div class="qc-[312px]:underline"></div>
+            <div class="qc-[200rem]:underline"></div>
+            <div class="qc-[123px]:underline"></div>
           </div>
         `,
       },
@@ -50,116 +50,116 @@ it('container queries', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .\@container {
+      .qc-container {
         container-type: inline-size;
       }
 
-      .\@container-normal {
+      .qc-container-normal {
         container-type: normal;
       }
 
-      .\@container\/sidebar {
+      .qc-container\/sidebar {
         container-type: inline-size;
         container-name: sidebar;
       }
 
-      .\@container-normal\/sidebar {
+      .qc-container-normal\/sidebar {
         container-type: normal;
         container-name: sidebar;
       }
 
       @container (min-width: 123px) {
-        .\@\[123px\]\:underline {
+        .qc-\[123px\]\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 200rem) {
-        .\@\[200rem\]\:underline {
+        .qc-\[200rem\]\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 312px) {
-        .\@\[312px\]\:underline {
+        .qc-\[312px\]\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container1 (min-width: 320px) {
-        .\@sm\/container1\:underline {
+        .qc-sm\/container1\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container2 (min-width: 320px) {
-        .\@sm\/container2\:underline {
+        .qc-sm\/container2\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container10 (min-width: 320px) {
-        .\@sm\/container10\:underline {
+        .qc-sm\/container10\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 320px) {
-        .\@sm\:underline {
+        .qc-sm\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container1 (min-width: 768px) {
-        .\@md\/container1\:underline {
+        .qc-md\/container1\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container2 (min-width: 768px) {
-        .\@md\/container2\:underline {
+        .qc-md\/container2\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container10 (min-width: 768px) {
-        .\@md\/container10\:underline {
+        .qc-md\/container10\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 768px) {
-        .\@md\:underline {
+        .qc-md\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container1 (min-width: 1024px) {
-        .\@lg\/container1\:underline {
+        .qc-lg\/container1\:underline {
           text-decoration-line: underline;
         }
-        .\@\[1024px\]\/container1\:underline {
+        .qc-\[1024px\]\/container1\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container2 (min-width: 1024px) {
-        .\@lg\/container2\:underline {
+        .qc-lg\/container2\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container container10 (min-width: 1024px) {
-        .\@lg\/container10\:underline {
+        .qc-lg\/container10\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 1024px) {
-        .\@lg\:underline {
+        .qc-lg\:underline {
           text-decoration-line: underline;
         }
-        .\@\[1024px\]\:underline {
+        .qc-\[1024px\]\:underline {
           text-decoration-line: underline;
         }
       }
@@ -173,14 +173,11 @@ it('should be possible to use default container queries', () => {
       {
         raw: html`
           <div>
-            <div class="@md:underline"></div>
-            <div class="@lg:underline"></div>
-            <div class="@sm:underline"></div>
-            <div class="@xs:underline"></div>
-            <div class="@7xl:underline"></div>
-            <div class="@6xl:underline"></div>
-            <div class="@3xl:underline"></div>
-            <div class="@5xl:underline"></div>
+            <div class="qc-md:underline"></div>
+            <div class="qc-lg:underline"></div>
+            <div class="qc-sm:underline"></div>
+            <div class="qc-xl:underline"></div>
+            <div class="qc-2xl:underline"></div>
           </div>
         `,
       },
@@ -196,49 +193,49 @@ it('should be possible to use default container queries', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @container (min-width: 20rem) {
-        .\@xs\:underline {
+        .qc-xs\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 24rem) {
-        .\@sm\:underline {
+        .qc-sm\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 28rem) {
-        .\@md\:underline {
+        .qc-md\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 32rem) {
-        .\@lg\:underline {
+        .qc-lg\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 48rem) {
-        .\@3xl\:underline {
+        .qc-3xl\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 64rem) {
-        .\@5xl\:underline {
+        .qc-5xl\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 72rem) {
-        .\@6xl\:underline {
+        .qc-6xl\:underline {
           text-decoration-line: underline;
         }
       }
 
       @container (min-width: 80rem) {
-        .\@7xl\:underline {
+        .qc-7xl\:underline {
           text-decoration-line: underline;
         }
       }

From c6c07e89da4b2489164513b5c54e4545a9e2b2b2 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 19:45:44 +0200
Subject: [PATCH 06/36] Fixed tests

---
 tests/index.test.ts | 40 +++++++++++-----------------------------
 1 file changed, 11 insertions(+), 29 deletions(-)

diff --git a/tests/index.test.ts b/tests/index.test.ts
index f5da801..d9c5438 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -86,25 +86,25 @@ it('container queries', () => {
         }
       }
 
-      @container container1 (min-width: 320px) {
+      @container container1 (min-width: 640px) {
         .qc-sm\/container1\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container container2 (min-width: 320px) {
+      @container container2 (min-width: 640px) {
         .qc-sm\/container2\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container container10 (min-width: 320px) {
+      @container container10 (min-width: 640px) {
         .qc-sm\/container10\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container (min-width: 320px) {
+      @container (min-width: 640px) {
         .qc-sm\:underline {
           text-decoration-line: underline;
         }
@@ -192,50 +192,32 @@ it('should be possible to use default container queries', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      @container (min-width: 20rem) {
-        .qc-xs\:underline {
-          text-decoration-line: underline;
-        }
-      }
-
-      @container (min-width: 24rem) {
+      @container (min-width: 640px) {
         .qc-sm\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container (min-width: 28rem) {
+      @container (min-width: 768px) {
         .qc-md\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container (min-width: 32rem) {
+      @container (min-width: 1024px) {
         .qc-lg\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container (min-width: 48rem) {
-        .qc-3xl\:underline {
-          text-decoration-line: underline;
-        }
-      }
-
-      @container (min-width: 64rem) {
-        .qc-5xl\:underline {
-          text-decoration-line: underline;
-        }
-      }
-
-      @container (min-width: 72rem) {
-        .qc-6xl\:underline {
+      @container (min-width: 1280px) {
+        .qc-xl\:underline {
           text-decoration-line: underline;
         }
       }
 
-      @container (min-width: 80rem) {
-        .qc-7xl\:underline {
+      @container (min-width: 1536px) {
+        .qc-2xl\:underline {
           text-decoration-line: underline;
         }
       }

From c8afa2faaf5805f1c2fe7cb191c7a3ac81237aaa Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 19:54:09 +0200
Subject: [PATCH 07/36] Fixed test again...

---
 tests/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/index.test.ts b/tests/index.test.ts
index d9c5438..91d45db 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -36,7 +36,7 @@ it('container queries', () => {
     ],
     theme: {
       containers: {
-        sm: '320px',
+        sm: '640px',
         md: '768px',
         lg: '1024px',
       },

From 73ff9651cc2d1d6d7502cdbb0c73940244b6dab8 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 20:07:40 +0200
Subject: [PATCH 08/36] Minor

---
 src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index c502b3a..0932461 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,7 +30,7 @@ export = plugin(
     )
 
     matchVariant(
-      'qc-',
+      'qc',
       (value = '', { modifier }) => {
         let parsed = parseValue(value)
 

From ab56515c53fb8ecaa9569fc86625b0d868ed4c5c Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 20:19:01 +0200
Subject: [PATCH 09/36] test fix?

---
 tests/index.test.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tests/index.test.ts b/tests/index.test.ts
index 91d45db..3ad1e06 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -68,6 +68,11 @@ it('container queries', () => {
         container-name: sidebar;
       }
 
+      .qc-container-\[size\]\/sidebar {
+        container-type: size;
+        container-name: sidebar;
+      }
+
       @container (min-width: 123px) {
         .qc-\[123px\]\:underline {
           text-decoration-line: underline;

From a42d9d493efc6832b3b190a605cd889c96931b25 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 21:50:59 +0200
Subject: [PATCH 10/36] Added max & range containers.

---
 CHANGELOG.md        |  4 +++
 README.md           | 40 ++++++++++++++++++++------
 package.json        |  2 +-
 src/index.ts        | 62 +++++++++++++++++++++++++--------------
 tests/index.test.ts | 70 +++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 147 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a10fb0a..42fb8ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.2.1] - 2023-10-25
+
+- Added suport for max values and ranges
+
 ## [0.2.0] - 2023-10-25
 
 - Updated package.json after fork
diff --git a/README.md b/README.md
index 6a9145d..7b61023 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
 This is fork of original repo https://github.com/tailwindlabs/tailwindcss-container-queries
-I modificated prefix '@' to 'qc-' so now it works better with Razor syntax and I changed default breakpoints to same as tailwind breakpoints.
+I modificated prefix '@' to 'qc-' so now it works better with Razor syntax and I changed default breakpoints to same as tailwind breakpoints. This version also have max and range modifiers.
 
 ## Installation
 
@@ -34,13 +34,37 @@ Start by marking an element as a container using the `qc-container` class, and t
 ```html
 <div class="qc-container">
   <div class="qc-lg:underline">
-    <!-- This text will be underlined when the container is larger than `32rem` -->
+    <!-- This text will be underlined when the container is larger than or equals `1024px` -->
   </div>
 </div>
 ```
 
 By default we provide [container sizes](#configuration) from `qc-sm` (`640px`) to `qc-2xl` (`1536px`).
 
+### Max modifiers
+
+You can mark an element with `qc-max-{breakpoint}` class, for example `qc-max-md` (width < 768px), `qc-max-lg` (width < 1024px>).
+
+```html
+<div class="qc-container">
+  <div class="qc-max-lg:underline">
+    <!-- This text will be underlined when the container is smaller than `1024px` -->
+  </div>
+</div>
+```
+
+### Range modifiers
+
+You can mark an element with `qc-{breakpoint}:qc-max-{breakpoint}` class, for example `qc-sm:qc-max-lg` (min-width: 640px and width < 1024px).
+
+```html
+<div class="qc-container">
+  <div class="qc-sm:qc-max-lg:underline">
+    <!-- This text will be underlined when the container is larger than or equals `640px and smaller than `1024px` -->
+  </div>
+</div>
+```
+
 ### Named containers
 
 You can optionally name containers using a `qc-container/{name}` class, and then include that name in the container variants using classes like `qc-lg/{name}:underline`:
@@ -49,7 +73,7 @@ You can optionally name containers using a `qc-container/{name}` class, and then
 <div class="qc-container/main">
   <!-- ... -->
   <div class="qc-lg/main:underline">
-    <!-- This text will be underlined when the "main" container is larger than `32rem` -->
+    <!-- This text will be underlined when the "main" container is larger than `1024px` -->
   </div>
 </div>
 ```
@@ -93,11 +117,11 @@ By default we ship with the following configured values:
 
 | Name     | CSS                                          |
 | -------- | -------------------------------------------- |
-| `qc-sm`  | `@container (min-width: 640px)`  |
-| `qc-md`  | `@container (min-width: 768px)`  |
-| `qc-lg`  | `@container (min-width: 1024px)`  |
-| `qc-xl`  | `@container (min-width: 1280px)`  |
-| `qc-2xl` | `@container (min-width: 1536px)`  |
+| `qc-sm`  | `@container (min-width: 640px)`              |
+| `qc-md`  | `@container (min-width: 768px)`              |
+| `qc-lg`  | `@container (min-width: 1024px)`             |
+| `qc-xl`  | `@container (min-width: 1280px)`             |
+| `qc-2xl` | `@container (min-width: 1536px)`             |
 
 You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:
 
diff --git a/package.json b/package.json
index ad920d4..9f4e7e4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@krzysztof318/tw-container-queries",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
diff --git a/src/index.ts b/src/index.ts
index 0932461..c343807 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,6 +29,34 @@ export = plugin(
       }
     )
 
+    const sort: (
+      a: { value: string; modifier: string | null },
+      b: { value: string; modifier: string | null }
+    ) => number = (aVariant, zVariant) => {
+      let a = parseFloat(aVariant.value)
+      let z = parseFloat(zVariant.value)
+
+      if (a === null || z === null) return 0
+
+      // Sort values themselves regardless of unit
+      if (a - z !== 0) return a - z
+
+      let aLabel = aVariant.modifier ?? ''
+      let zLabel = zVariant.modifier ?? ''
+
+      // Explicitly move empty labels to the end
+      if (aLabel === '' && zLabel !== '') {
+        return 1
+      } else if (aLabel !== '' && zLabel === '') {
+        return -1
+      }
+
+      // Sort labels alphabetically in the English locale
+      // We are intentionally overriding the locale because we do not want the sort to
+      // be affected by the machine's locale (be it a developer or CI environment)
+      return aLabel.localeCompare(zLabel, 'en', { numeric: true })
+    }
+
     matchVariant(
       'qc',
       (value = '', { modifier }) => {
@@ -38,30 +66,20 @@ export = plugin(
       },
       {
         values,
-        sort(aVariant, zVariant) {
-          let a = parseFloat(aVariant.value)
-          let z = parseFloat(zVariant.value)
-
-          if (a === null || z === null) return 0
-
-          // Sort values themselves regardless of unit
-          if (a - z !== 0) return a - z
-
-          let aLabel = aVariant.modifier ?? ''
-          let zLabel = zVariant.modifier ?? ''
+        sort,
+      }
+    )
 
-          // Explicitly move empty labels to the end
-          if (aLabel === '' && zLabel !== '') {
-            return 1
-          } else if (aLabel !== '' && zLabel === '') {
-            return -1
-          }
+    matchVariant(
+      'qc-max',
+      (value = '', { modifier }) => {
+        let parsed = parseValue(value)
 
-          // Sort labels alphabetically in the English locale
-          // We are intentionally overriding the locale because we do not want the sort to
-          // be affected by the machine's locale (be it a developer or CI environment)
-          return aLabel.localeCompare(zLabel, 'en', { numeric: true })
-        },
+        return parsed !== null ? `@container ${modifier ?? ''} (width < ${value})` : []
+      },
+      {
+        values,
+        sort,
       }
     )
   },
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 3ad1e06..570c84f 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -229,3 +229,73 @@ it('should be possible to use default container queries', () => {
     `)
   })
 })
+
+it('container max & range queries', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div
+            class="qc-container"
+          >
+            <div class="qc-max-lg:underline"></div>
+            <div class="qc-max-xl:underline"></div>
+
+            <div class="qc-sm:qc-max-lg:underline"></div>
+            <div class="qc-md/container1:qc-max-xl/container1:underline"></div>
+          </div>
+        `,
+      },
+    ],
+    theme: {
+      containers: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+      },
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .qc-container {
+        container-type: inline-size;
+      }
+
+      @container (width < 1024px) {
+        .qc-max-lg\:underline {
+          text-decoration-line: underline;
+        }
+      }
+
+      @container (width < 1280px) {
+        .qc-max-xl\:underline {
+          text-decoration-line: underline;
+        }
+      }
+
+      @container (min-width: 640px) {
+        @container (width < 1024px) {
+          .qc-sm\:qc-max-lg\:underline {
+            text-decoration-line: underline;
+          }
+        }
+      }
+
+      @container container1 (min-width: 768px) {
+        @container container1 (width < 1280px) {
+          .qc-md\/container1\:qc-max-xl\/container1\:underline {
+            text-decoration-line: underline;
+          }
+        }
+      }
+    `)
+  })
+})
\ No newline at end of file

From e923c5ab0133d6bbf8a3f49b6018b58568c5928e Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 20:49:40 +0000
Subject: [PATCH 11/36] Fixed sorting modifiers

---
 src/index.ts        | 34 +++++++++++++++++++++++++++++++---
 tests/index.test.ts | 22 +++++++++++-----------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index c343807..040bcf1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,7 +29,7 @@ export = plugin(
       }
     )
 
-    const sort: (
+    const sortMin: (
       a: { value: string; modifier: string | null },
       b: { value: string; modifier: string | null }
     ) => number = (aVariant, zVariant) => {
@@ -57,6 +57,34 @@ export = plugin(
       return aLabel.localeCompare(zLabel, 'en', { numeric: true })
     }
 
+    const sortMax: (
+      a: { value: string; modifier: string | null },
+      b: { value: string; modifier: string | null }
+    ) => number = (aVariant, zVariant) => {
+      let a = parseFloat(aVariant.value)
+      let z = parseFloat(zVariant.value)
+
+      if (a === null || z === null) return 0
+
+      // Sort values themselves regardless of unit
+      if (z - a !== 0) return z - a
+
+      let aLabel = aVariant.modifier ?? ''
+      let zLabel = zVariant.modifier ?? ''
+
+      // Explicitly move empty labels to the end
+      if (aLabel === '' && zLabel !== '') {
+        return 1
+      } else if (aLabel !== '' && zLabel === '') {
+        return -1
+      }
+
+      // Sort labels opposite to alphabetically in the English locale
+      // We are intentionally overriding the locale because we do not want the sort to
+      // be affected by the machine's locale (be it a developer or CI environment)
+      return zLabel.localeCompare(aLabel, 'en', { numeric: true })
+    }
+
     matchVariant(
       'qc',
       (value = '', { modifier }) => {
@@ -66,7 +94,7 @@ export = plugin(
       },
       {
         values,
-        sort,
+        sort: sortMin,
       }
     )
 
@@ -79,7 +107,7 @@ export = plugin(
       },
       {
         values,
-        sort,
+        sort: sortMax,
       }
     )
   },
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 570c84f..56cba47 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -269,9 +269,11 @@ it('container max & range queries', () => {
         container-type: inline-size;
       }
 
-      @container (width < 1024px) {
-        .qc-max-lg\:underline {
-          text-decoration-line: underline;
+      @container container1 (min-width: 768px) {
+        @container container1 (width < 1280px) {
+          .qc-md\/container1\:qc-max-xl\/container1\:underline {
+            text-decoration-line: underline;
+          }
         }
       }
 
@@ -281,17 +283,15 @@ it('container max & range queries', () => {
         }
       }
 
-      @container (min-width: 640px) {
-        @container (width < 1024px) {
-          .qc-sm\:qc-max-lg\:underline {
-            text-decoration-line: underline;
-          }
+      @container (width < 1024px) {
+        .qc-max-lg\:underline {
+          text-decoration-line: underline;
         }
       }
 
-      @container container1 (min-width: 768px) {
-        @container container1 (width < 1280px) {
-          .qc-md\/container1\:qc-max-xl\/container1\:underline {
+      @container (min-width: 640px) {
+        @container (width < 1024px) {
+          .qc-sm\:qc-max-lg\:underline {
             text-decoration-line: underline;
           }
         }

From b5651d987b9cc85bbdc278e759b19484522f5efd Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 22:55:13 +0200
Subject: [PATCH 12/36] updated changelog

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 42fb8ad..de19bfa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,4 +19,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed '@' to 'qc-'
 - Changed breakpoints to same as in tailwind
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.1.1...HEAD
+[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...HEAD
+[0.2.1]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
+[0.2.0]: https://github.com/tailwindlabs/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file

From 2135d644daa2b83a6cdbe1ca37575fc0b8bd6ac0 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 22:56:05 +0200
Subject: [PATCH 13/36] Updated changelog

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de19bfa..b6cd64c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,5 +20,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed breakpoints to same as in tailwind
 
 [unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...HEAD
-[0.2.1]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
-[0.2.0]: https://github.com/tailwindlabs/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file
+[0.2.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
+[0.2.0]: https://github.com/Krzysztof318/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file

From 9b4c556df2680e60456dc4ee8ab965e75a870e64 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:39:07 +0200
Subject: [PATCH 14/36] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7b61023..8401a1b 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `q
 
 ## Configuration
 
-By default we ship with the following configured values:
+By default we ship with the following configured breakpoints:
 
 | Name     | CSS                                          |
 | -------- | -------------------------------------------- |

From 122683d7e7c34607942ec0efd88a495c122433d3 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:42:58 +0200
Subject: [PATCH 15/36] Update README.md

---
 README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 8401a1b..7640836 100644
--- a/README.md
+++ b/README.md
@@ -115,13 +115,13 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `q
 
 By default we ship with the following configured breakpoints:
 
-| Name     | CSS                                          |
-| -------- | -------------------------------------------- |
-| `qc-sm`  | `@container (min-width: 640px)`              |
-| `qc-md`  | `@container (min-width: 768px)`              |
-| `qc-lg`  | `@container (min-width: 1024px)`             |
-| `qc-xl`  | `@container (min-width: 1280px)`             |
-| `qc-2xl` | `@container (min-width: 1536px)`             |
+| Name     | CSS                                          | Name         | CSS                                          |
+| -------- | -------------------------------------------- | ------------ | -------------------------------------------- |
+| `qc-sm`  | `@container (min-width: 640px)`              | `qc-max-sm`  | `@container (width < 640px)`                 |
+| `qc-md`  | `@container (min-width: 768px)`              | `qc-max-md`  | `@container (width < 768px)`                 |
+| `qc-lg`  | `@container (min-width: 1024px)`             | `qc-max-lg`  | `@container (width < 1024px)`                |
+| `qc-xl`  | `@container (min-width: 1280px)`             | `qc-max-xl`  | `@container (width < 1280px)`                |
+| `qc-2xl` | `@container (min-width: 1536px)`             | `qc-max-2xl` | `@container (width < 1536px)`                |
 
 You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:
 

From 71de75f0718a98e538c2ffe1a2bb0c81ff2a4179 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:46:00 +0200
Subject: [PATCH 16/36] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7640836..09afcaa 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,8 @@ By default we ship with the following configured breakpoints:
 | `qc-xl`  | `@container (min-width: 1280px)`             | `qc-max-xl`  | `@container (width < 1280px)`                |
 | `qc-2xl` | `@container (min-width: 1536px)`             | `qc-max-2xl` | `@container (width < 1536px)`                |
 
-You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:
+You can configure which breakpoints are available for this plugin under the `containers` key in your `tailwind.config.js` file:
+It will be applied to `qc-{breakpoint}` and `qc-max-{breakpoint}`.
 
 ```js
 // tailwind.config.js

From e82bfeb4baf60e31235e162606ac4bb56074f4ed Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:48:10 +0200
Subject: [PATCH 17/36] Update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 09afcaa..7884a6d 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
 # @krzysztof318/tw-container-queries
 
 A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
-This is fork of original repo https://github.com/tailwindlabs/tailwindcss-container-queries
+
+This is fork of original repo [LINK](https://github.com/tailwindlabs/tailwindcss-container-queries)
+
 I modificated prefix '@' to 'qc-' so now it works better with Razor syntax and I changed default breakpoints to same as tailwind breakpoints. This version also have max and range modifiers.
 
 ## Installation

From 0170826d8c7115fb764628f41ceee1526586e223 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:49:34 +0200
Subject: [PATCH 18/36] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 7884a6d..db97221 100644
--- a/README.md
+++ b/README.md
@@ -126,6 +126,7 @@ By default we ship with the following configured breakpoints:
 | `qc-2xl` | `@container (min-width: 1536px)`             | `qc-max-2xl` | `@container (width < 1536px)`                |
 
 You can configure which breakpoints are available for this plugin under the `containers` key in your `tailwind.config.js` file:
+
 It will be applied to `qc-{breakpoint}` and `qc-max-{breakpoint}`.
 
 ```js

From 5993f6c3ae379c899b659e676a5198ae4ac9585d Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:54:24 +0200
Subject: [PATCH 19/36] Update LICENSE

---
 LICENSE | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/LICENSE b/LICENSE
index f5f9341..441bc9d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,30 @@
 MIT License
 
-Copyright (c) 2023 Tailwind Labs
+Copyright (c) 2023 Krzysztof318
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Base software:
+
+MIT License
+
+Copyright (c) 2023 Tailwind Labs (code to commit c287ac75d50ad71f7f4813c9007e33029a50358e)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

From b9a47d3dab927efce4efbcb86e449df6517ea2e5 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:58:06 +0200
Subject: [PATCH 20/36] Update README.md

---
 README.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index db97221..c7c5d80 100644
--- a/README.md
+++ b/README.md
@@ -125,7 +125,7 @@ By default we ship with the following configured breakpoints:
 | `qc-xl`  | `@container (min-width: 1280px)`             | `qc-max-xl`  | `@container (width < 1280px)`                |
 | `qc-2xl` | `@container (min-width: 1536px)`             | `qc-max-2xl` | `@container (width < 1536px)`                |
 
-You can configure which breakpoints are available for this plugin under the `containers` key in your `tailwind.config.js` file:
+You can add breakpoints which are available for this plugin under the `containers` key in your `tailwind.config.js` file:
 
 It will be applied to `qc-{breakpoint}` and `qc-max-{breakpoint}`.
 
@@ -141,3 +141,16 @@ module.exports = {
   },
 }
 ```
+
+Or override all breakpoints with yours:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    containers: {
+      '2xs': '16rem',
+    },
+  },
+}
+```

From 76795478cb708d5254e4d75fab6de4da267915de Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Wed, 25 Oct 2023 23:59:09 +0200
Subject: [PATCH 21/36] Update README.md

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c7c5d80..23e7e0a 100644
--- a/README.md
+++ b/README.md
@@ -149,7 +149,9 @@ Or override all breakpoints with yours:
 module.exports = {
   theme: {
     containers: {
-      '2xs': '16rem',
+      'xs': '16rem',
+      'md': '32rem',
+      'lg': '48rem',
     },
   },
 }

From 8207e09ea3739ac81d1078e83ead4e7db711a7a4 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 00:05:36 +0200
Subject: [PATCH 22/36] Update README.md

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/README.md b/README.md
index 23e7e0a..b1282c5 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,23 @@ To stop an element from acting as a container, use the `qc-container-normal` cla
   <!-- ... -->
 </div>
 
+### Arbitrary container
+
+You can create container with arbitary value:
+
+```html
+<div class="qc-container-[size]">
+  <!-- ... -->
+</div>
+```
+This will be compiled to:
+
+```css
+.qc-container-\[size\] {
+  container-type: size;
+}
+```
+
 ### With a prefix
 
 If you have configured Tailwind to use a prefix, make sure to prefix both the `qc-container` class and any classes where you are using a container query modifier:

From a3432a5ec2df84cc6a597dd94f50fd920eeba629 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 00:07:48 +0200
Subject: [PATCH 23/36] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index b1282c5..42ad67e 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,8 @@ Start by marking an element as a container using the `qc-container` class, and t
 </div>
 ```
 
+Default `container-type` is `inline-size`.
+
 By default we provide [container sizes](#configuration) from `qc-sm` (`640px`) to `qc-2xl` (`1536px`).
 
 ### Max modifiers

From 7dfebb027c1c8f4c927d38ee4b2b59e9d1a08e6f Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 00:13:33 +0200
Subject: [PATCH 24/36] Updated ver to 0.2.2

---
 CHANGELOG.md | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6cd64c..87147f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.2.2] - 2023-10-25
+
+- Updated readme.md
+
 ## [0.2.1] - 2023-10-25
 
 - Added suport for max values and ranges
@@ -20,5 +24,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed breakpoints to same as in tailwind
 
 [unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...HEAD
+[0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/Krzysztof318/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file
diff --git a/package.json b/package.json
index 9f4e7e4..b391b43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@krzysztof318/tw-container-queries",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",

From 1eb0b1d2ff0988a28e2d71a1cd63c9c5cbddafad Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:32:54 +0000
Subject: [PATCH 25/36] Changed qc-container to qc-queryable. Added
 qc-container fixed size component.

---
 src/index.ts        |  68 +++++++++++++++++++++---
 tests/index.test.ts | 126 ++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 176 insertions(+), 18 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 040bcf1..286831f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,10 @@
 import plugin from 'tailwindcss/plugin'
+import { CSSRuleObject } from 'tailwindcss/types/config'
 
 export = plugin(
-  function containerQueries({ matchUtilities, matchVariant, theme }) {
-    let values: Record<string, string> = theme('containers') ?? {}
+  function containerQueries({ matchComponents, matchUtilities, matchVariant, theme }) {
+    let queryablesValues: Record<string, string> = theme('qc-queryables') ?? {}
+    let containersValues: Array<string> = theme('qc-containers') ?? {}
 
     function parseValue(value: string) {
       let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
@@ -11,9 +13,50 @@ export = plugin(
       return parseFloat(value)
     }
 
-    matchUtilities(
+    function getFixedSizeContainers(modifier: string | null): CSSRuleObject {
+      let sizes = [...containersValues]
+      sizes.sort((a,b) => {
+        let aVal = parseFloat(a)
+        let bVal = parseFloat(b)
+        if (aVal === null || bVal === null) return 0
+        // Sort values themselves regardless of unit
+        if (aVal - bVal !== 0) return aVal - bVal
+        return 0
+      })
+      let rule: CSSRuleObject = {}
+      if (modifier != null) {
+        rule[`@container ${modifier}`] = {
+          width: '100cqi'
+        }
+      }
+      else {
+        rule.width = '100cqi'
+      }
+      sizes.forEach((val) => 
+        rule[`@container ${modifier ?? ''} (min-width: ${val})`] = {
+          'max-width': val
+        }
+      )
+      return rule
+    }
+
+    matchComponents(
       {
         'qc-container': (value, { modifier }) => {
+          return getFixedSizeContainers(modifier)
+        }
+      },
+      {
+        values: {
+          DEFAULT: 'n/a'
+        },
+        modifiers: 'any'
+      }
+    )
+
+    matchUtilities(
+      {
+        'qc-queryable': (value, { modifier }) => {
           return {
             'container-type': value,
             'container-name': modifier,
@@ -79,10 +122,10 @@ export = plugin(
         return -1
       }
 
-      // Sort labels opposite to alphabetically in the English locale
+      // Sort labels alphabetically in the English locale
       // We are intentionally overriding the locale because we do not want the sort to
       // be affected by the machine's locale (be it a developer or CI environment)
-      return zLabel.localeCompare(aLabel, 'en', { numeric: true })
+      return aLabel.localeCompare(zLabel, 'en', { numeric: true })
     }
 
     matchVariant(
@@ -93,7 +136,7 @@ export = plugin(
         return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
       },
       {
-        values,
+        values: queryablesValues,
         sort: sortMin,
       }
     )
@@ -106,20 +149,29 @@ export = plugin(
         return parsed !== null ? `@container ${modifier ?? ''} (width < ${value})` : []
       },
       {
-        values,
+        values: queryablesValues,
         sort: sortMax,
       }
     )
   },
   {
     theme: {
-      containers: {
+      'qc-queryables': {
         sm: '640px',
         md: '768px',
         lg: '1024px',
         xl: '1280px',
         '2xl': '1536px',
       },
+      'qc-containers': [
+        '240px',
+        '320px',
+        '480px',
+        '640px',
+        '768px',
+        '1024px',
+        '1280px',
+      ]
     },
   }
 )
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 56cba47..b697f1a 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -7,7 +7,7 @@ it('container queries', () => {
       {
         raw: html`
           <div
-            class="qc-container qc-container-normal qc-container/sidebar qc-container-normal/sidebar qc-container-[size]/sidebar"
+            class="qc-queryable qc-queryable-normal qc-queryable/sidebar qc-queryable-normal/sidebar qc-queryable-[size]/sidebar"
           >
             <div class="qc-md:underline"></div>
             <div class="qc-md/container1:underline"></div>
@@ -35,7 +35,7 @@ it('container queries', () => {
       },
     ],
     theme: {
-      containers: {
+      'qc-containers': {
         sm: '640px',
         md: '768px',
         lg: '1024px',
@@ -50,25 +50,25 @@ it('container queries', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .qc-container {
+      .qc-queryable {
         container-type: inline-size;
       }
 
-      .qc-container-normal {
+      .qc-queryable-normal {
         container-type: normal;
       }
 
-      .qc-container\/sidebar {
+      .qc-queryable\/sidebar {
         container-type: inline-size;
         container-name: sidebar;
       }
 
-      .qc-container-normal\/sidebar {
+      .qc-queryable-normal\/sidebar {
         container-type: normal;
         container-name: sidebar;
       }
 
-      .qc-container-\[size\]\/sidebar {
+      .qc-queryable-\[size\]\/sidebar {
         container-type: size;
         container-name: sidebar;
       }
@@ -236,7 +236,7 @@ it('container max & range queries', () => {
       {
         raw: html`
           <div
-            class="qc-container"
+            class="qc-queryable"
           >
             <div class="qc-max-lg:underline"></div>
             <div class="qc-max-xl:underline"></div>
@@ -248,7 +248,7 @@ it('container max & range queries', () => {
       },
     ],
     theme: {
-      containers: {
+      'qc-containers': {
         sm: '640px',
         md: '768px',
         lg: '1024px',
@@ -265,7 +265,7 @@ it('container max & range queries', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .qc-container {
+      .qc-queryable {
         container-type: inline-size;
       }
 
@@ -298,4 +298,110 @@ it('container max & range queries', () => {
       }
     `)
   })
+})
+
+it('container fixed size', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="qc-queryable">
+            <div class="qc-container"></div>
+            <div class="qc-sm:qc-container"></div>
+
+            <div class="qc-container/container1"></div>
+            <div class="qc-md:qc-container/container1"></div>
+          </div>
+        `,
+      },
+    ],
+    theme: {
+      'qc-queryables': {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+      },
+      'qc-containers': [
+        '240px',
+        '640px',
+        '1024px',
+      ]
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .qc-container {
+        width: 100cqi;
+        @container (min-width: 240px) {
+          max-width: 240px;
+        }
+        @container (min-width: 640px) {
+          max-width: 640px;
+        }
+        @container (min-width: 1024px) {
+          max-width: 1024px;
+        }
+      }
+
+      .qc-container\/container1 {
+        @container container1 {
+          width: 100cqi;
+        }
+        @container container1 (min-width: 240px) {
+          max-width: 240px;
+        }
+        @container container1 (min-width: 640px) {
+          max-width: 640px;
+        }
+        @container container1 (min-width: 1024px) {
+          max-width: 1024px;
+        }
+      }
+
+      .qc-queryable {
+        container-type: inline-size;
+      }
+
+      @container (min-width: 640px) {
+        .qc-sm\:qc-container {
+          width: 100cqi;
+          @container (min-width: 240px) {
+            max-width: 240px;
+          }
+          @container (min-width: 640px) {
+            max-width: 640px;
+          }
+          @container (min-width: 1024px) {
+            max-width: 1024px;
+          }
+        }
+      }
+
+      @container (min-width: 768px) {
+        .qc-md\:qc-container\/container1 {
+          @container container1 {
+            width: 100cqi;
+          }
+          @container container1 (min-width: 240px) {
+            max-width: 240px;
+          }
+          @container container1 (min-width: 640px) {
+            max-width: 640px;
+          }
+          @container container1 (min-width: 1024px) {
+            max-width: 1024px;
+          }
+        }
+      }
+    `)
+  })
 })
\ No newline at end of file

From 0e6832e77069287a3ef6e0bf74fbb51eba581fb8 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 11:36:16 +0000
Subject: [PATCH 26/36] Added qc-w for control width in cgi and arbitrary
 values.

---
 src/index.ts        | 40 +++++++++++++++++++++++++++-
 tests/index.test.ts | 65 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 286831f..ebde07b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 import plugin from 'tailwindcss/plugin'
-import { CSSRuleObject } from 'tailwindcss/types/config'
+import { CSSRuleObject, KeyValuePair } from 'tailwindcss/types/config'
 
 export = plugin(
   function containerQueries({ matchComponents, matchUtilities, matchVariant, theme }) {
@@ -72,6 +72,44 @@ export = plugin(
       }
     )
 
+    function getValuesForWidthCqi(): KeyValuePair<string, string> {
+      let values: KeyValuePair<string, string> = {}
+      for (let i = 1; i <= 100; i++) {
+        values[i] = String(i);
+      }
+      return values
+    }
+
+    function getWidthCqi(value: string, modifier: string | null): CSSRuleObject {
+      let rule: CSSRuleObject = {}
+      if (value.match(/^\d+$/) != null) {
+        value += 'cqi'
+      } 
+      if (parseValue(value) == null) {
+        return rule
+      }
+      if (modifier != null) {
+        rule[`@container ${modifier}`] = {
+          width: value
+        }
+      } else {
+        rule.width = value
+      }
+      return rule
+    }
+
+    matchUtilities(
+      {
+        'qc-w': (value, { modifier }) => {
+          return getWidthCqi(value, modifier)
+        },
+      },
+      {
+        values: getValuesForWidthCqi(),
+        modifiers: 'any',
+      }
+    )
+
     const sortMin: (
       a: { value: string; modifier: string | null },
       b: { value: string; modifier: string | null }
diff --git a/tests/index.test.ts b/tests/index.test.ts
index b697f1a..83f502c 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -404,4 +404,69 @@ it('container fixed size', () => {
       }
     `)
   })
+})
+
+it('container width utility', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="qc-queryable">
+            <div class="qc-w-12"></div>
+            <div class="qc-w-67"></div>
+
+            <div class="qc-w-80/container1"></div>
+            <div class="qc-w-[120px]/container1></div>
+          </div>
+        `,
+      },
+    ],
+    theme: {
+      'qc-queryables': {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+      },
+      'qc-containers': [
+        '240px',
+        '640px',
+        '1024px',
+      ]
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .qc-queryable {
+        container-type: inline-size;
+      }
+
+      .qc-w-12 {
+        width: 12cqi;
+      }
+
+      .qc-w-67 {
+        width: 67cqi;
+      }
+
+      .qc-w-80\/container1 {
+        @container container1 {
+          width: 80cqi;
+        }
+      }
+
+      .qc-w-\[120px\]\/container1 {
+        @container container1 {
+          width: 120px;
+        }
+      }
+    `)
+  })
 })
\ No newline at end of file

From fed3c09cb6f9ee23853b03ee59d302e4cd6cdbbb Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 11:40:52 +0000
Subject: [PATCH 27/36] Updated ver to 0.3.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9f4e7e4..8e709e1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@krzysztof318/tw-container-queries",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",

From 9c26b8fe51446bd470b26c3cf76d3e16eaf8a609 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 12:12:25 +0000
Subject: [PATCH 28/36] Updated readme

---
 CHANGELOG.md |  9 ++++-
 README.md    | 98 +++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 90 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87147f2..7dab6f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.3.0] - 2023-10-26
+
+- Changed 'qc-container' to 'qc-queryable'
+- Added qc-container (similar to tailwind media query container)
+- Added qc-w-{size in cqi} to control width against to parent qc-queryable
+
 ## [0.2.2] - 2023-10-25
 
 - Updated readme.md
@@ -23,7 +29,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed '@' to 'qc-'
 - Changed breakpoints to same as in tailwind
 
-[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...HEAD
+[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.0...HEAD
+[0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.2...v0.3.0
 [0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/Krzysztof318/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file
diff --git a/README.md b/README.md
index 42ad67e..507cf43 100644
--- a/README.md
+++ b/README.md
@@ -31,10 +31,10 @@ module.exports = {
 
 ## Usage
 
-Start by marking an element as a container using the `qc-container` class, and then applying styles based on the size of that container using the container variants like `qc-md:`, `qc-lg:`, and `qc-xl:`:
+Start by marking an element as a container queryable using the `qc-queryable` class, and then applying styles based on the size of that container using the container variants like `qc-md:`, `qc-lg:`, and `qc-xl:`:
 
 ```html
-<div class="qc-container">
+<div class="qc-queryable">
   <div class="qc-lg:underline">
     <!-- This text will be underlined when the container is larger than or equals `1024px` -->
   </div>
@@ -43,14 +43,14 @@ Start by marking an element as a container using the `qc-container` class, and t
 
 Default `container-type` is `inline-size`.
 
-By default we provide [container sizes](#configuration) from `qc-sm` (`640px`) to `qc-2xl` (`1536px`).
+By default we provide [queryable sizes](#configuration) from `qc-sm` (`640px`) to `qc-2xl` (`1536px`).
 
 ### Max modifiers
 
 You can mark an element with `qc-max-{breakpoint}` class, for example `qc-max-md` (width < 768px), `qc-max-lg` (width < 1024px>).
 
 ```html
-<div class="qc-container">
+<div class="qc-queryable">
   <div class="qc-max-lg:underline">
     <!-- This text will be underlined when the container is smaller than `1024px` -->
   </div>
@@ -62,7 +62,7 @@ You can mark an element with `qc-max-{breakpoint}` class, for example `qc-max-md
 You can mark an element with `qc-{breakpoint}:qc-max-{breakpoint}` class, for example `qc-sm:qc-max-lg` (min-width: 640px and width < 1024px).
 
 ```html
-<div class="qc-container">
+<div class="qc-queryable">
   <div class="qc-sm:qc-max-lg:underline">
     <!-- This text will be underlined when the container is larger than or equals `640px and smaller than `1024px` -->
   </div>
@@ -71,10 +71,10 @@ You can mark an element with `qc-{breakpoint}:qc-max-{breakpoint}` class, for ex
 
 ### Named containers
 
-You can optionally name containers using a `qc-container/{name}` class, and then include that name in the container variants using classes like `qc-lg/{name}:underline`:
+You can optionally name containers using a `qc-queryable/{name}` class, and then include that name in the container variants using classes like `qc-lg/{name}:underline`:
 
 ```html
-<div class="qc-container/main">
+<div class="qc-queryable/main">
   <!-- ... -->
   <div class="qc-lg/main:underline">
     <!-- This text will be underlined when the "main" container is larger than `1024px` -->
@@ -87,7 +87,7 @@ You can optionally name containers using a `qc-container/{name}` class, and then
 In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value:
 
 ```html
-<div class="qc-container">
+<div class="qc-queryable">
   <div class="qc-[17.5rem]:underline"></div>
     <!-- This text will be underlined when the container is larger than `17.5rem` -->
   </div>
@@ -96,9 +96,9 @@ In addition to using one of the [container sizes](#configuration) provided by de
 
 ### Removing a container
 
-To stop an element from acting as a container, use the `qc-container-normal` class.
+To stop an element from acting as a container, use the `qc-queryable-normal` class.
 
-<div class="qc-container xl:qc-container-normal">
+<div class="qc-queryable xl:qc-queryable-normal">
   <!-- ... -->
 </div>
 
@@ -107,24 +107,62 @@ To stop an element from acting as a container, use the `qc-container-normal` cla
 You can create container with arbitary value:
 
 ```html
-<div class="qc-container-[size]">
+<div class="qc-queryable-[size]">
   <!-- ... -->
 </div>
 ```
 This will be compiled to:
 
 ```css
-.qc-container-\[size\] {
+.qc-queryable-\[size\] {
   container-type: size;
 }
 ```
 
+### Fixed size container component
+
+I provided also `qc-container` similar to tailwind container component:
+
+```html
+<div class="qc-queryable">
+  <div class="qc-container"></div>
+    <!-- Fixed size -->
+  </div>
+</div>
+```
+
+By default I provide [container sizes](#configuration).
+
+## Width utility for named containers
+
+You can use simple width utility with named containers:
+
+```html
+<div class="qc-queryable/sidebar">
+  <div class="qc-queryable">
+    <div class="qc-w-34/sidebar"></div>
+      <!-- Div size 34cqi of parent qc-queryable only if nested in qc-queryable/sidebar -->
+    </div>
+  </div>
+</div>
+```
+
+Arbitrary values also are supported:
+
+```html
+<div class="qc-queryable/sidebar">
+  <div class="qc-w-[250px]/sidebar"></div>
+    <!-- Div size 250px only if nested in qc-queryable/sidebar -->
+  </div>
+</div>
+```
+
 ### With a prefix
 
-If you have configured Tailwind to use a prefix, make sure to prefix both the `qc-container` class and any classes where you are using a container query modifier:
+If you have configured Tailwind to use a prefix, make sure to prefix both the `qc-queryable` class and any classes where you are using a container query modifier:
 
 ```html
-<div class="tw-qc-container">
+<div class="tw-qc-queryable">
   <!-- ... -->
   <div class="qc-lg:tw-underline">
     <!-- ... -->
@@ -144,6 +182,19 @@ By default we ship with the following configured breakpoints:
 | `qc-xl`  | `@container (min-width: 1280px)`             | `qc-max-xl`  | `@container (width < 1280px)`                |
 | `qc-2xl` | `@container (min-width: 1536px)`             | `qc-max-2xl` | `@container (width < 1536px)`                |
 
+Default containers:
+
+| Breakpoint | Properties          |
+| ---------- | ------------------- |
+| `none`     | `width: 100cqi`     |
+| `240px`    | `max-width: 240px`  |
+| `320px`    | `max-width: 320px`  |
+| `480px`    | `max-width: 480px`  |
+| `640px`    | `max-width: 640px`  |
+| `768px`    | `max-width: 768px`  |
+| `1024px`   | `max-width: 1024px` |
+| `1280px`   | `max-width: 1280px` |
+
 You can add breakpoints which are available for this plugin under the `containers` key in your `tailwind.config.js` file:
 
 It will be applied to `qc-{breakpoint}` and `qc-max-{breakpoint}`.
@@ -153,7 +204,7 @@ It will be applied to `qc-{breakpoint}` and `qc-max-{breakpoint}`.
 module.exports = {
   theme: {
     extend: {
-      containers: {
+      'qc-queryables': {
         '2xs': '16rem',
       },
     },
@@ -167,7 +218,7 @@ Or override all breakpoints with yours:
 // tailwind.config.js
 module.exports = {
   theme: {
-    containers: {
+    'qc-queryables': {
       'xs': '16rem',
       'md': '32rem',
       'lg': '48rem',
@@ -175,3 +226,18 @@ module.exports = {
   },
 }
 ```
+
+You can also configure containers fixed sizes and their breakpoints:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    'qc-containers': {
+      '240px',
+      '320px',
+      '480px',
+    },
+  },
+}
+```
\ No newline at end of file

From c289e5580506ff838bc87edc80ba0f14612e662f Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 12:15:42 +0000
Subject: [PATCH 29/36] Updated readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 507cf43..8328c88 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
 
 This is fork of original repo [LINK](https://github.com/tailwindlabs/tailwindcss-container-queries)
 
-I modificated prefix '@' to 'qc-' so now it works better with Razor syntax and I changed default breakpoints to same as tailwind breakpoints. This version also have max and range modifiers.
+I modificated prefix '@' to 'qc-' so now it works better with Razor syntax and many other things.
 
 ## Installation
 

From b8e06afa68b3b961dd500bc308b525edf6ef8dd7 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 12:52:19 +0000
Subject: [PATCH 30/36] Removed qc-w utility.

---
 CHANGELOG.md        |  7 ++---
 README.md           | 25 ----------------
 package.json        |  2 +-
 src/index.ts        | 46 ----------------------------
 tests/index.test.ts | 73 ---------------------------------------------
 5 files changed, 4 insertions(+), 149 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7dab6f2..f51da94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,11 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
-## [0.3.0] - 2023-10-26
+## [0.3.1] - 2023-10-26
 
 - Changed 'qc-container' to 'qc-queryable'
 - Added qc-container (similar to tailwind media query container)
-- Added qc-w-{size in cqi} to control width against to parent qc-queryable
 
 ## [0.2.2] - 2023-10-25
 
@@ -29,8 +28,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed '@' to 'qc-'
 - Changed breakpoints to same as in tailwind
 
-[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.0...HEAD
-[0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.2...v0.3.0
+[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.1...HEAD
+[0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.2...v0.3.1
 [0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/Krzysztof318/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file
diff --git a/README.md b/README.md
index 8328c88..509ef40 100644
--- a/README.md
+++ b/README.md
@@ -133,30 +133,6 @@ I provided also `qc-container` similar to tailwind container component:
 
 By default I provide [container sizes](#configuration).
 
-## Width utility for named containers
-
-You can use simple width utility with named containers:
-
-```html
-<div class="qc-queryable/sidebar">
-  <div class="qc-queryable">
-    <div class="qc-w-34/sidebar"></div>
-      <!-- Div size 34cqi of parent qc-queryable only if nested in qc-queryable/sidebar -->
-    </div>
-  </div>
-</div>
-```
-
-Arbitrary values also are supported:
-
-```html
-<div class="qc-queryable/sidebar">
-  <div class="qc-w-[250px]/sidebar"></div>
-    <!-- Div size 250px only if nested in qc-queryable/sidebar -->
-  </div>
-</div>
-```
-
 ### With a prefix
 
 If you have configured Tailwind to use a prefix, make sure to prefix both the `qc-queryable` class and any classes where you are using a container query modifier:
@@ -186,7 +162,6 @@ Default containers:
 
 | Breakpoint | Properties          |
 | ---------- | ------------------- |
-| `none`     | `width: 100cqi`     |
 | `240px`    | `max-width: 240px`  |
 | `320px`    | `max-width: 320px`  |
 | `480px`    | `max-width: 480px`  |
diff --git a/package.json b/package.json
index 8e709e1..959e126 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@krzysztof318/tw-container-queries",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
diff --git a/src/index.ts b/src/index.ts
index ebde07b..82fa2b3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,14 +24,6 @@ export = plugin(
         return 0
       })
       let rule: CSSRuleObject = {}
-      if (modifier != null) {
-        rule[`@container ${modifier}`] = {
-          width: '100cqi'
-        }
-      }
-      else {
-        rule.width = '100cqi'
-      }
       sizes.forEach((val) => 
         rule[`@container ${modifier ?? ''} (min-width: ${val})`] = {
           'max-width': val
@@ -72,44 +64,6 @@ export = plugin(
       }
     )
 
-    function getValuesForWidthCqi(): KeyValuePair<string, string> {
-      let values: KeyValuePair<string, string> = {}
-      for (let i = 1; i <= 100; i++) {
-        values[i] = String(i);
-      }
-      return values
-    }
-
-    function getWidthCqi(value: string, modifier: string | null): CSSRuleObject {
-      let rule: CSSRuleObject = {}
-      if (value.match(/^\d+$/) != null) {
-        value += 'cqi'
-      } 
-      if (parseValue(value) == null) {
-        return rule
-      }
-      if (modifier != null) {
-        rule[`@container ${modifier}`] = {
-          width: value
-        }
-      } else {
-        rule.width = value
-      }
-      return rule
-    }
-
-    matchUtilities(
-      {
-        'qc-w': (value, { modifier }) => {
-          return getWidthCqi(value, modifier)
-        },
-      },
-      {
-        values: getValuesForWidthCqi(),
-        modifiers: 'any',
-      }
-    )
-
     const sortMin: (
       a: { value: string; modifier: string | null },
       b: { value: string; modifier: string | null }
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 83f502c..86168f2 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -340,7 +340,6 @@ it('container fixed size', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .qc-container {
-        width: 100cqi;
         @container (min-width: 240px) {
           max-width: 240px;
         }
@@ -353,9 +352,6 @@ it('container fixed size', () => {
       }
 
       .qc-container\/container1 {
-        @container container1 {
-          width: 100cqi;
-        }
         @container container1 (min-width: 240px) {
           max-width: 240px;
         }
@@ -373,7 +369,6 @@ it('container fixed size', () => {
 
       @container (min-width: 640px) {
         .qc-sm\:qc-container {
-          width: 100cqi;
           @container (min-width: 240px) {
             max-width: 240px;
           }
@@ -388,9 +383,6 @@ it('container fixed size', () => {
 
       @container (min-width: 768px) {
         .qc-md\:qc-container\/container1 {
-          @container container1 {
-            width: 100cqi;
-          }
           @container container1 (min-width: 240px) {
             max-width: 240px;
           }
@@ -404,69 +396,4 @@ it('container fixed size', () => {
       }
     `)
   })
-})
-
-it('container width utility', () => {
-  let config = {
-    content: [
-      {
-        raw: html`
-          <div class="qc-queryable">
-            <div class="qc-w-12"></div>
-            <div class="qc-w-67"></div>
-
-            <div class="qc-w-80/container1"></div>
-            <div class="qc-w-[120px]/container1></div>
-          </div>
-        `,
-      },
-    ],
-    theme: {
-      'qc-queryables': {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-        '2xl': '1536px',
-      },
-      'qc-containers': [
-        '240px',
-        '640px',
-        '1024px',
-      ]
-    },
-    corePlugins: { preflight: false },
-  }
-
-  let input = css`
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .qc-queryable {
-        container-type: inline-size;
-      }
-
-      .qc-w-12 {
-        width: 12cqi;
-      }
-
-      .qc-w-67 {
-        width: 67cqi;
-      }
-
-      .qc-w-80\/container1 {
-        @container container1 {
-          width: 80cqi;
-        }
-      }
-
-      .qc-w-\[120px\]\/container1 {
-        @container container1 {
-          width: 120px;
-        }
-      }
-    `)
-  })
 })
\ No newline at end of file

From 1812caca9a7d17a6f1c106cce777edfaff2a12c6 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 14:54:15 +0200
Subject: [PATCH 31/36] Update CHANGELOG.md

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f51da94..4a4b987 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,7 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed breakpoints to same as in tailwind
 
 [unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.1...HEAD
-[0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.2...v0.3.1
+[0.3.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.2...v0.3.1
 [0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
-[0.2.0]: https://github.com/Krzysztof318/tailwindcss-container-queries/releases/tag/v0.2.0
\ No newline at end of file
+[0.2.0]: https://github.com/Krzysztof318/tailwindcss-container-queries/releases/tag/v0.2.0

From 9d439f1fac249448f6fb6e7ed12e70ac4d275b36 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 16:57:16 +0000
Subject: [PATCH 32/36] Added auto centering.

---
 package.json        |  2 +-
 src/index.ts        |  4 ++++
 tests/index.test.ts | 54 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 959e126..3028c99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@krzysztof318/tw-container-queries",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
diff --git a/src/index.ts b/src/index.ts
index 82fa2b3..fb1e04a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,6 +24,10 @@ export = plugin(
         return 0
       })
       let rule: CSSRuleObject = {}
+      if (theme('container.center', false)) {
+        rule.marginRight = 'auto';
+        rule.marginLeft = 'auto;'
+      }
       sizes.forEach((val) => 
         rule[`@container ${modifier ?? ''} (min-width: ${val})`] = {
           'max-width': val
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 86168f2..87c6a71 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -396,4 +396,58 @@ it('container fixed size', () => {
       }
     `)
   })
+})
+
+it('container auto center', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="qc-container">
+          </div>
+        `,
+      },
+    ],
+    theme: {
+      'qc-queryables': {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px',
+      },
+      'qc-containers': [
+        '240px',
+        '640px',
+        '1024px',
+      ],
+      container: {
+        center: true,
+      },
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .qc-container {
+        margin-right: auto;
+        margin-left: auto;
+          @container (min-width: 240px) {
+            max-width: 240px;
+          }
+          @container (min-width: 640px) {
+            max-width: 640px;
+          }
+          @container (min-width: 1024px) {
+            max-width: 1024px;
+          }
+      }
+    `)
+  })
 })
\ No newline at end of file

From 57aa68640a3c34bc6ecb1b064b4c0c1e88540e28 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:08:12 +0000
Subject: [PATCH 33/36] Added rule.width = 100% for qc-container

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index fb1e04a..ed37ca9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,6 +24,7 @@ export = plugin(
         return 0
       })
       let rule: CSSRuleObject = {}
+      rule.width = '100%'
       if (theme('container.center', false)) {
         rule.marginRight = 'auto';
         rule.marginLeft = 'auto;'

From 7bb7cdf18728e036bc47627d2f12a351ea36f639 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:11:23 +0000
Subject: [PATCH 34/36] Fixed tests

---
 tests/index.test.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/tests/index.test.ts b/tests/index.test.ts
index 87c6a71..80b17ae 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -340,6 +340,7 @@ it('container fixed size', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .qc-container {
+        width: 100%;
         @container (min-width: 240px) {
           max-width: 240px;
         }
@@ -352,6 +353,7 @@ it('container fixed size', () => {
       }
 
       .qc-container\/container1 {
+        width: 100%;
         @container container1 (min-width: 240px) {
           max-width: 240px;
         }
@@ -369,6 +371,7 @@ it('container fixed size', () => {
 
       @container (min-width: 640px) {
         .qc-sm\:qc-container {
+          width: 100%;
           @container (min-width: 240px) {
             max-width: 240px;
           }
@@ -383,6 +386,7 @@ it('container fixed size', () => {
 
       @container (min-width: 768px) {
         .qc-md\:qc-container\/container1 {
+          width: 100%;
           @container container1 (min-width: 240px) {
             max-width: 240px;
           }
@@ -436,6 +440,7 @@ it('container auto center', () => {
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .qc-container {
+        width: 100%;
         margin-right: auto;
         margin-left: auto;
           @container (min-width: 240px) {

From 633779c25399e60cd1a065c461cf1025e6d5df3a Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 17:16:20 +0000
Subject: [PATCH 35/36] Uodated changelog and readme

---
 CHANGELOG.md |  7 ++++++-
 README.md    | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a4b987..b0f9145 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.3.2] - 2023-10-26
+
+- Added auto center option for fixed size containers
+
 ## [0.3.1] - 2023-10-26
 
 - Changed 'qc-container' to 'qc-queryable'
@@ -28,7 +32,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed '@' to 'qc-'
 - Changed breakpoints to same as in tailwind
 
-[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.1...HEAD
+[unreleased]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.2...HEAD
+[0.3.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.3.1...v0.3.2
 [0.3.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.2...v0.3.1
 [0.2.2]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/Krzysztof318/tailwindcss-container-queries/compare/v0.2.0...v0.2.1
diff --git a/README.md b/README.md
index 509ef40..07a9fcc 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,7 @@ I provided also `qc-container` similar to tailwind container component:
 ```
 
 By default I provide [container sizes](#configuration).
+Containers are not default centered but you can enable this in configuration.
 
 ### With a prefix
 
@@ -162,6 +163,7 @@ Default containers:
 
 | Breakpoint | Properties          |
 | ---------- | ------------------- |
+| `none`     | `width: 100%`       |
 | `240px`    | `max-width: 240px`  |
 | `320px`    | `max-width: 320px`  |
 | `480px`    | `max-width: 480px`  |
@@ -215,4 +217,17 @@ module.exports = {
     },
   },
 }
+```
+
+You can enable auto centering for `qc-containers`:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+    },
+  },
+}
 ```
\ No newline at end of file

From 49468b0106343058651f547710a4c04de51e17e1 Mon Sep 17 00:00:00 2001
From: Krzysztof <60486987+Krzysztof318@users.noreply.github.com>
Date: Thu, 26 Oct 2023 19:18:48 +0200
Subject: [PATCH 36/36] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 07a9fcc..209d2f4 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,7 @@ I provided also `qc-container` similar to tailwind container component:
 ```
 
 By default I provide [container sizes](#configuration).
+
 Containers are not default centered but you can enable this in configuration.
 
 ### With a prefix
@@ -230,4 +231,4 @@ module.exports = {
     },
   },
 }
-```
\ No newline at end of file
+```