diff --git a/packages/style/lib/contain.ts b/packages/style/lib/contain.ts new file mode 100644 index 00000000..39f5236d --- /dev/null +++ b/packages/style/lib/contain.ts @@ -0,0 +1,26 @@ +import { Config } from 'tailwindcss'; +import plugin from 'tailwindcss/plugin.js'; + +export const containTheme: Config['theme'] = { + contain: { + none: 'none', + strict: 'strict', + size: 'size', + inlineSize: 'inline-size', + layout: 'layout', + style: 'style', + paint: 'paint', + content: 'content', + }, +}; + +export const containPlugin = plugin(({matchUtilities, theme}) => { + matchUtilities( + { + contain: (value) => ({ + contain: value, + }), + }, + { values: theme('contain') }, + ); +}); diff --git a/packages/style/tailwind.ts b/packages/style/tailwind.ts index 514af157..231a6427 100644 --- a/packages/style/tailwind.ts +++ b/packages/style/tailwind.ts @@ -1,7 +1,6 @@ -// import {join, dirname} from 'node:path'; - import {animationTheme} from './lib/animation.js'; import {colorTheme, colorPlugin} from './lib/color-scheme.js'; +import {containPlugin, containTheme} from './lib/contain.js'; import {directionPlugin} from './lib/direction.js'; import {elevationPlugin} from './lib/elevation.js'; import {safeAreaPlugin} from './lib/safe-area.js'; @@ -22,7 +21,16 @@ export const tailwindConfig: Omit = { ...zIndexTheme, ...screenTheme, ...animationTheme, + ...containTheme, }, }, - plugins: [colorPlugin, elevationPlugin, stateLayerPlugin, translucentPlugin, safeAreaPlugin, directionPlugin], + plugins: [ + colorPlugin, + elevationPlugin, + stateLayerPlugin, + translucentPlugin, + safeAreaPlugin, + directionPlugin, + containPlugin, + ], };