From fde4a156d2e98f75e5bd14f4895bd004bd7603a8 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 25 May 2024 22:07:28 -0500 Subject: [PATCH] Fix bundle and log extractor config errors --- plugin/package.json | 7 ++- plugin/src/extractor.ts | 15 ++++- plugin/src/index.ts | 69 ++++++++++++++-------- plugin/src/util/context.ts | 10 +++- plugin/src/util/errors.ts | 5 +- plugin/tests/index.test.ts | 66 +++++++++++++++++++++ plugin/tests/run.ts | 2 - plugin/tsconfig.json | 1 + pnpm-lock.yaml | 114 +++++++++++++++++++++++++++++++++---- site/pages/_Layout.astro | 6 +- site/pages/index.mdx | 45 +++++---------- site/tailwind.config.ts | 1 - 12 files changed, 261 insertions(+), 80 deletions(-) diff --git a/plugin/package.json b/plugin/package.json index 4de06cc..d8c0d62 100644 --- a/plugin/package.json +++ b/plugin/package.json @@ -1,6 +1,6 @@ { "name": "fluid-tailwind", - "version": "0.3.2", + "version": "0.3.3", "author": "Maxwell Barvian", "main": "dist/index.js", "module": "dist/index.mjs", @@ -24,7 +24,7 @@ ], "scripts": { "test": "bun test", - "build": "tsup src/index.ts --format esm,cjs --no-splitting --clean && tsc -p tsconfig.build.json --emitDeclarationOnly", + "build": "tsup-node src/index.ts --format esm,cjs --no-splitting --clean && tsc -p tsconfig.build.json --emitDeclarationOnly", "dev": "pnpm run build --watch", "prepublishOnly": "pnpm run build && pnpm run test" }, @@ -37,8 +37,9 @@ }, "devDependencies": { "@tailwindcss/container-queries": "^0.1.1", - "@types/bun": "^1.0.5", + "@types/bun": "^1.1.3", "@types/dlv": "^1.1.4", + "bun": "^1.1.10", "dlv": "^1.1.3", "jest-diff": "^29.7.0", "postcss": "^8.4.17", diff --git a/plugin/src/extractor.ts b/plugin/src/extractor.ts index 44214fd..2255e27 100644 --- a/plugin/src/extractor.ts +++ b/plugin/src/extractor.ts @@ -9,6 +9,10 @@ type ExtractorOptions = { let defaultPatterns +/** @internal */ +export const DEFAULT_PREFIX = '', DEFAULT_SEPARATOR = ':', // these aren't available in `tailwindcss/defaultConfig` +PASSED_PREFIX = Symbol(), PASSED_SEPARATOR = Symbol(), IS_FLUID_EXTRACT = Symbol() + // This is the default extractor from 'tailwindcss-priv/src/lib/defaultExtractor' // with two extra chars to support the ~ prefix function extract(content: string): ReturnType @@ -28,7 +32,7 @@ function extract(contentOrOptions: string | ExtractorOptions): ReturnType { + return Object.assign((content: string) => { let results: string[] = [] for (const pattern of patterns) { @@ -38,12 +42,17 @@ function extract(contentOrOptions: string | ExtractorOptions): ReturnType @@ -89,8 +97,8 @@ function getFluidAPI( } ) + // Add negative version if supported if (!options?.supportsNegativeValues) return - orig( { [`~-${context.prefix}${util}`](start, { modifier: end }) { @@ -132,14 +140,29 @@ function getFluidAPI( } } -let inFluidPlugin = false -const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAPI) => { - if (inFluidPlugin) return // prevent recursion when adding fluid versions of config.plugins - inFluidPlugin = true - +const IS_FLUID_PLUGIN = Symbol() +const fluidPlugin = (options: PluginOptions = {}, api: PluginAPI) => { const { config, theme, corePlugins: corePluginEnabled, matchUtilities } = api const context = getContext(config, theme, options) - const { screens, containers, prefix } = context + const { screens, containers, prefix, separator } = context + + // Make sure they remembered to pass in extractor correctly + const extractor = config('content.extract.DEFAULT') as ExtractorFn + if (!extractor || !(IS_FLUID_EXTRACT in extractor)) { + error('extractor-missing') + } + if ( + prefix !== DEFAULT_PREFIX && + (!(PASSED_PREFIX in extractor) || extractor[PASSED_PREFIX] !== prefix) + ) { + error('extractor-option-mismatch', 'prefix', prefix) + } + if ( + separator !== DEFAULT_SEPARATOR && + (!(PASSED_SEPARATOR in extractor) || extractor[PASSED_SEPARATOR] !== separator) + ) { + error('extractor-option-mismatch', 'separator', separator) + } // Add new fluid text utility to handle potentially complex theme values // --- @@ -260,24 +283,18 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP const plugins = config('plugins') as Config['plugins'] plugins?.forEach((plug, i) => { if (!plug) return - - if (typeof plug === 'function') { - if ('__isOptionsFunction' in plug && plug.__isOptionsFunction) { - plug(undefined).handler(fluidPluginAPI) - } else { - plug(fluidPluginAPI) - } - } else { - plug.handler(fluidPluginAPI) - } + const handler = + typeof plug === 'function' + ? '__isOptionsFunction' in plug && plug.__isOptionsFunction + ? plug(undefined).handler + : plug + : plug.handler + if (!(IS_FLUID_PLUGIN in handler)) handler(fluidPluginAPI) }) // Screen variants // --- - // We need this for error output, so retrieve and cache - const separator = config('separator') ?? ':' - // Handle the rewrites and potential errors: const rewrite = ( container: Container, @@ -375,10 +392,12 @@ const fluid = plugin.withOptions((options: PluginOptions = {}) => (api: PluginAP } } ) - - inFluidPlugin = false -}) - +} +// Make sure it's named fluid, b/c it shows up in IntelliSense: +const fluid = plugin.withOptions((options: PluginOptions = {}) => + // Organized this way to attach the symbol correctly, and also assuage Prettier: + Object.assign((api: PluginAPI) => fluidPlugin(options, api), { [IS_FLUID_PLUGIN]: true }) +) export default fluid /** diff --git a/plugin/src/util/context.ts b/plugin/src/util/context.ts index 4af326a..b90235c 100644 --- a/plugin/src/util/context.ts +++ b/plugin/src/util/context.ts @@ -1,4 +1,10 @@ -import type { KeyValuePair, PluginAPI, PrefixConfig, ThemeConfig } from 'tailwindcss/types/config' +import type { + KeyValuePair, + PluginAPI, + PrefixConfig, + SeparatorConfig, + ThemeConfig +} from 'tailwindcss/types/config' import mapObject, { mapObjectSkip } from 'map-obj' import { error } from './errors' import { Length } from './css' @@ -20,6 +26,7 @@ export default function getContext( { checkSC144 = true }: PluginOptions = {} ) { const prefix: PrefixConfig = config('prefix') + const separator: SeparatorConfig = config('separator') const themeConfig: ResolvedFluidThemeConfig = theme('fluid') ?? {} // Filter breakpoints by simple valid lengths @@ -95,6 +102,7 @@ export default function getContext( }, theme, prefix, + separator, checkSC144 } } diff --git a/plugin/src/util/errors.ts b/plugin/src/util/errors.ts index db25670..1760fa0 100644 --- a/plugin/src/util/errors.ts +++ b/plugin/src/util/errors.ts @@ -20,7 +20,10 @@ export const codes = { 'no-change-bp': (val: Length) => `Start and end breakpoints are both ${val.cssText}`, 'bp-not-found': (key: string, name: string) => `Could not find \`theme.${key}.${name}\``, 'no-utility': () => 'Fluid variants can only be used with fluid utilities', - 'fails-sc-144': (failingBp: Length) => `Fails WCAG SC 1.4.4 at i.e. ${failingBp.cssText}` + 'fails-sc-144': (failingBp: Length) => `Fails WCAG SC 1.4.4 at i.e. ${failingBp.cssText}`, + 'extractor-missing': () => `fluid-tailwind: Fluid extractor not found in your Tailwind config`, + 'extractor-option-mismatch': (opt: string, val: string) => + `fluid-tailwind: You must pass in your \`config.${opt}\` to the fluid extractor, i.e. \`extract({ ${opt}: \'${val}\' })\`` } satisfies Record string> export class FluidError extends Error { diff --git a/plugin/tests/index.test.ts b/plugin/tests/index.test.ts index 766d43e..a8131e1 100644 --- a/plugin/tests/index.test.ts +++ b/plugin/tests/index.test.ts @@ -277,6 +277,72 @@ it(`respects defaultScreens config`, async () => { `) }) +it(`errors if extractor wasn't used`, () => { + return expect( + run({ + content: { + files: [{ raw: html`` }] + } + }) + ).rejects.toThrow('fluid-tailwind: Fluid extractor not found in your Tailwind config') +}) + +it(`errors if custom prefix wasn't passed into extractor`, () => { + return expect( + run({ + prefix: 'tw-', + content: { + files: [{ raw: html`` }], + extract + } + }) + ).rejects.toThrow( + `fluid-tailwind: You must pass in your \`config.prefix\` to the fluid extractor, i.e. \`extract({ prefix: 'tw-' })\`` + ) +}) + +it(`errors if different prefix was passed into extractor`, () => { + return expect( + run({ + prefix: 'tw-', + content: { + files: [{ raw: html`` }], + extract: extract({ prefix: 'tw' }) + } + }) + ).rejects.toThrow( + `fluid-tailwind: You must pass in your \`config.prefix\` to the fluid extractor, i.e. \`extract({ prefix: 'tw-' })\`` + ) +}) + +it(`errors if custom separator wasn't passed into extractor`, () => { + return expect( + run({ + separator: '_', + content: { + files: [{ raw: html`` }], + extract + } + }) + ).rejects.toThrow( + `fluid-tailwind: You must pass in your \`config.separator\` to the fluid extractor, i.e. \`extract({ separator: '_' })\`` + ) +}) + +it(`errors if different separator was passed into extractor`, () => { + return expect( + run({ + separator: '_', + content: { + files: [{ raw: html`` }], + extract: extract({ separator: '|' }) + } + }) + ).rejects.toThrow( + `fluid-tailwind: You must pass in your \`config.separator\` to the fluid extractor, i.e. \`extract({ separator: '_' })\`` + ) +}) + it(`supports custom separator and prefix`, async () => { const result = await run({ content: { diff --git a/plugin/tests/run.ts b/plugin/tests/run.ts index 56638f4..544f4c1 100644 --- a/plugin/tests/run.ts +++ b/plugin/tests/run.ts @@ -14,8 +14,6 @@ export async function run(config: Config, input = `@tailwind utilities;@tailwind files: config.content, extract } - } else { - config.content.extract ??= extract } config.corePlugins ??= {} diff --git a/plugin/tsconfig.json b/plugin/tsconfig.json index b6da4ac..197bfa1 100644 --- a/plugin/tsconfig.json +++ b/plugin/tsconfig.json @@ -14,6 +14,7 @@ "declaration": true, "module": "ES2022", "moduleResolution": "Bundler", + "stripInternal": true, "outDir": "dist", "lib": ["es2022"] }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3b0f060..99c3ed8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,11 +40,14 @@ importers: specifier: ^0.1.1 version: 0.1.1(tailwindcss@3.4.1) '@types/bun': - specifier: ^1.0.5 - version: 1.0.7 + specifier: ^1.1.3 + version: 1.1.3 '@types/dlv': specifier: ^1.1.4 version: 1.1.4 + bun: + specifier: ^1.1.10 + version: 1.1.10 dlv: specifier: ^1.1.3 version: 1.1.3 @@ -637,6 +640,46 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@oven/bun-darwin-aarch64@1.1.10': + resolution: {integrity: sha512-5x6QGEzTurmCPZM3OLosIJE0QynhKfKZZ6uSVl7C36mNPFAZfTXjK64LgbM+4P9Kr0PyEQnZweLlScl+HaEJcw==} + cpu: [arm64] + os: [darwin] + + '@oven/bun-darwin-x64-baseline@1.1.10': + resolution: {integrity: sha512-a/P612tHH86gpBiITwHmrpFMLT9Z/v6VxBKpPK+FgejIgLDGvzfIOxbNtBeGygWbZaAFDQfRRQJFGpVHvjwGQA==} + cpu: [x64] + os: [darwin] + + '@oven/bun-darwin-x64@1.1.10': + resolution: {integrity: sha512-DYbp2koaATwWikMIyeWLq2LhLZtvxzr4WuFIBe4+KwoWLGXJEC8uK9QsTwis/tCLPH45ov9DMwDmBA31oX+0iA==} + cpu: [x64] + os: [darwin] + + '@oven/bun-linux-aarch64@1.1.10': + resolution: {integrity: sha512-iR7TRUWtVtrPe+iZu1ISQNbz7M6HxMRtn4PCr/a6dswuPkIhvXxTJUD6WTpHnHxsgioS5GHG9eonu03PTeBY0Q==} + cpu: [arm64] + os: [linux] + + '@oven/bun-linux-x64-baseline@1.1.10': + resolution: {integrity: sha512-TjBH/KIyI/4Ms3PJYRm2QEgI7HOyV5fXdwqwB/40SCPXND6wq0u4voHDIINc9rdHDRXpmO8RPUFWsKNuN3Mf5w==} + cpu: [x64] + os: [linux] + + '@oven/bun-linux-x64@1.1.10': + resolution: {integrity: sha512-pUgLdu/5Yn+hV8aIwZE0x2H/t2QQRIPWUibnUdDLglnNtGjaqNUyST9iVN5TD7NdMk1p342GDc9rouA8VxAHHA==} + cpu: [x64] + os: [linux] + + '@oven/bun-windows-x64-baseline@1.1.10': + resolution: {integrity: sha512-+q2pDLq9VCXYJ89pcT5AevXUTGdDoqgq+scE3qlKLclSxtSR25K18C61D9rpqgiueC6jLrxIN13w5qOi4B3LfQ==} + cpu: [x64] + os: [win32] + + '@oven/bun-windows-x64@1.1.10': + resolution: {integrity: sha512-+KiITh1xyrDGoRXM3HLHyO9iweaMZ9T41KP4cbov92D78SKxR5jpq1LDLPhWK668a0aNX/r9PGePkPNt4yg/HA==} + cpu: [x64] + os: [win32] + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -756,8 +799,8 @@ packages: '@types/babel__traverse@7.20.5': resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==} - '@types/bun@1.0.7': - resolution: {integrity: sha512-zaPoQi+uBaqy7BwAh6HQ5dSt6H95XeejCSGEukXHYO32xIPdzPXJjNzmCJ64TWCpM4+R7WyPMdCnkZyETAZfuw==} + '@types/bun@1.1.3': + resolution: {integrity: sha512-i+mVz8C/lx+RprDR6Mr402iE1kmajgJPnmSfJ/NvU85sGGXSylYZ/6yc+XhVLr2E/t8o6HmjwV0evtnUOR0CFA==} '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} @@ -792,6 +835,9 @@ packages: '@types/node@20.11.20': resolution: {integrity: sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==} + '@types/node@20.12.12': + resolution: {integrity: sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==} + '@types/parse5@6.0.3': resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} @@ -1028,8 +1074,14 @@ packages: buffer@6.0.3: resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==} - bun-types@1.0.28: - resolution: {integrity: sha512-wQqbLYRM0YnsXZMFujbCr/9YxlEl51jshMXcJ2Y9wEuU7k6TKcX2KDh032k9oHfB1wH8/SleXboIsULMtFaAaA==} + bun-types@1.1.9: + resolution: {integrity: sha512-3YuLiH4Ne/ghk7K6mHiaqCqKOMrtB0Z5p1WAskHSVgi0iMZgsARV4yGkbfi565YsStvUq6GXTWB3ga7M8cznkA==} + + bun@1.1.10: + resolution: {integrity: sha512-qOJXrQZSzJ5DbJMt47GZGWtUSmIkbwD7fPSN/XS/T46D4cTTnPK46QDHlyC8VD+Anvs6uKNwuwKIyB31kUdHmQ==} + cpu: [arm64, x64] + os: [darwin, linux, win32] + hasBin: true bundle-require@4.0.2: resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==} @@ -3686,6 +3738,30 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 + '@oven/bun-darwin-aarch64@1.1.10': + optional: true + + '@oven/bun-darwin-x64-baseline@1.1.10': + optional: true + + '@oven/bun-darwin-x64@1.1.10': + optional: true + + '@oven/bun-linux-aarch64@1.1.10': + optional: true + + '@oven/bun-linux-x64-baseline@1.1.10': + optional: true + + '@oven/bun-linux-x64@1.1.10': + optional: true + + '@oven/bun-windows-x64-baseline@1.1.10': + optional: true + + '@oven/bun-windows-x64@1.1.10': + optional: true + '@pkgjs/parseargs@0.11.0': optional: true @@ -3797,9 +3873,9 @@ snapshots: dependencies: '@babel/types': 7.23.9 - '@types/bun@1.0.7': + '@types/bun@1.1.3': dependencies: - bun-types: 1.0.28 + bun-types: 1.1.9 '@types/debug@4.1.12': dependencies: @@ -3836,6 +3912,11 @@ snapshots: '@types/node@20.11.20': dependencies: undici-types: 5.26.5 + optional: true + + '@types/node@20.12.12': + dependencies: + undici-types: 5.26.5 '@types/parse5@6.0.3': {} @@ -3845,7 +3926,7 @@ snapshots: '@types/ws@8.5.10': dependencies: - '@types/node': 20.11.20 + '@types/node': 20.12.12 '@ungap/structured-clone@1.2.0': {} @@ -4190,11 +4271,22 @@ snapshots: base64-js: 1.5.1 ieee754: 1.2.1 - bun-types@1.0.28: + bun-types@1.1.9: dependencies: - '@types/node': 20.11.20 + '@types/node': 20.12.12 '@types/ws': 8.5.10 + bun@1.1.10: + optionalDependencies: + '@oven/bun-darwin-aarch64': 1.1.10 + '@oven/bun-darwin-x64': 1.1.10 + '@oven/bun-darwin-x64-baseline': 1.1.10 + '@oven/bun-linux-aarch64': 1.1.10 + '@oven/bun-linux-x64': 1.1.10 + '@oven/bun-linux-x64-baseline': 1.1.10 + '@oven/bun-windows-x64': 1.1.10 + '@oven/bun-windows-x64-baseline': 1.1.10 + bundle-require@4.0.2(esbuild@0.19.12): dependencies: esbuild: 0.19.12 diff --git a/site/pages/_Layout.astro b/site/pages/_Layout.astro index 2536ddf..f20298c 100644 --- a/site/pages/_Layout.astro +++ b/site/pages/_Layout.astro @@ -122,9 +122,9 @@ const path = relative(root, file) class="~mt-6/8 dark:highlight-white/20 inline-flex h-12 items-center justify-center rounded-lg bg-slate-900 px-6 font-semibold text-white hover:bg-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 active:bg-slate-900 dark:bg-sky-500 dark:hover:bg-sky-400 dark:active:bg-sky-500" href="#installation">Get started -
+
@@ -132,7 +132,7 @@ const path = relative(root, file) diff --git a/site/pages/index.mdx b/site/pages/index.mdx index 6d892a8..1a0d074 100644 --- a/site/pages/index.mdx +++ b/site/pages/index.mdx @@ -36,31 +36,12 @@ export const components = { a: Link } <> - ### Add the plugin + ### Add the plugin and [extractor](https://tailwindcss.com/docs/content-configuration#customizing-extraction-logic) - Add the plugin to your Tailwind configuration. + The custom extractor lets you use the new `~` modifier in your Tailwind classes. - ```js title="tailwind.config.js" ins={1,6} - import fluid from 'fluid-tailwind' - - export default { - // ... - plugins: [ - fluid - ] - } - ``` - - - - <> - ### Add the [extractor](https://tailwindcss.com/docs/content-configuration#customizing-extraction-logic) - - The custom extractor lets you use the new `~` prefix in your Tailwind classes. - - - ```js title="tailwind.config.js" ins=", { extract }" ins={6} mark=/\: (\{)/ mark="files: " mark=/\](,)/ mark=/(\}),/ + ```js title="tailwind.config.js" ins={1,6,10} mark=/\: (\{)/ mark="files:" mark=/\](,)/ mark=/(\}),/ import fluid, { extract } from 'fluid-tailwind' export default { @@ -69,6 +50,9 @@ export const components = { a: Link } extract }, // ... + plugins: [ + fluid + ] } ``` @@ -77,8 +61,9 @@ export const components = { a: Link } <> ### Convert Tailwind's default screens to `rem` - You can skip this if you override Tailwind's default screens or use [`tw-reset`](https://github.com/barvian/tw-reset). - This [will be unnecessary](https://github.com/tailwindlabs/tailwindcss/pull/13469) in Tailwind v4 + You can skip this if you [override Tailwind's default screens](https://tailwindcss.com/docs/screens#overriding-the-defaults) or use [`tw-reset`](https://github.com/barvian/tw-reset) + + This [will be unnecessary](https://github.com/tailwindlabs/tailwindcss/pull/13469) in Tailwind v4. ```js title="tailwind.config.js" ins={6} ins=", screens" @@ -87,7 +72,7 @@ export const components = { a: Link } export default { // ... theme: { - screens, + screens }, // ... } @@ -106,7 +91,7 @@ export const components = { a: Link } ``` Here's a quick overview: -* The `~` prefix makes a utility fluid +* The `~` modifier makes a utility fluid * Fluid utilities have a start and end value, separated by a `/` * Fluid utilities interpolate between their start and end value when the viewport is between the start and end point, respectively * The start and end points default to the smallest and largest screen, but [they can be customized](#custom-default-screens) or [overridden per-utility](#customize-screens-per-utility) @@ -241,7 +226,7 @@ If you want to set an arbitrary start screen with the `~` variant, you have to u ### Negative values -To negate fluid utilities, the dash comes after the fluid `~` prefix: +To negate fluid utilities, the dash comes after the fluid `~` modifier: Negating a fluid utility ```html mark=/\~(\-)/ @@ -256,7 +241,7 @@ installed, you can make the start/end points relative to the nearest `@container ```html mark="~@md/lg:"

Relative to container

``` -This may look confusing if you use [named containers](https://github.com/tailwindlabs/tailwindcss-container-queries#named-containers). Sorry about that; there's only so many ways to get values into Tailwind. In general, when you see the fluid `~` prefix, you know the `/` denotes a start/end pair. +This may look confusing if you use [named containers](https://github.com/tailwindlabs/tailwindcss-container-queries#named-containers). Sorry about that; there's only so many ways to get values into Tailwind. In general, when you see the fluid `~` modifier, you know the `/` denotes a start/end pair. Just like the `~` variant, both start and end containers are optional and will use your [global defaults](#custom-default-containers) if unset. @@ -320,9 +305,9 @@ is our `md` screen 1. When we get to our `lg` screen, we interpolate between the opposite `4xl` and `base`, starting when the viewport is our `lg` screen -### Custom Tailwind prefix and/or separator +### Using with a custom prefix or separator -If you're using a custom Tailwind [`prefix`](https://tailwindcss.com/docs/configuration#prefix) or +If you're using a custom [`prefix`](https://tailwindcss.com/docs/configuration#prefix) or [`separator`](https://tailwindcss.com/docs/configuration#separator), you'll need to pass them in to the extractor as well: diff --git a/site/tailwind.config.ts b/site/tailwind.config.ts index 457f2f2..cd5da94 100644 --- a/site/tailwind.config.ts +++ b/site/tailwind.config.ts @@ -29,7 +29,6 @@ export default { }, theme: { fontSize, - extend: { screens: { xs: '30rem'