diff --git a/demo/pages/index.js b/demo/pages/index.js index b1afab8..347cb23 100644 --- a/demo/pages/index.js +++ b/demo/pages/index.js @@ -1,3 +1,4 @@ +import { Fragment } from 'react' import Head from 'next/head' import MarkdownSample from '../components/MarkdownSample.mdx' @@ -7,46 +8,78 @@ export default () => { Tailwind CSS Typography -
+

Tailwind CSS Typography

-
- - - - - - -
- - - - - View on GitHub - +
+
+ + + + + + +
-
+
+ + {/* Full Bleed Layout */} + +

+ Full Bleed Layout .prose-bleed +

+ +

+ Bleed is a printing term that describes a document that has graphics, images, + colors, or elements that reach to the edge of the paper. +

+ +

+ Use .prose-bleed to bleed content outside the container width. +

+ +
+ +
+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum libero + laudantium, nesciunt quae possimus, amet labore voluptatum nobis, dignissimos enim + eos voluptas! Eos possimus cumque suscipit beatae perferendis perspiciatis est! +

+
diff --git a/src/index.js b/src/index.js index ae3e5c6..2e89d96 100644 --- a/src/index.js +++ b/src/index.js @@ -44,12 +44,22 @@ module.exports = plugin.withOptions( ...Object.keys(config).filter((modifier) => !DEFAULT_MODIFIERS.includes(modifier)), ]) + const components = all.map((modifier) => ({ + [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss( + config[modifier] + ), + })) + addComponents( - all.map((modifier) => ({ - [modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss( - config[modifier] - ), - })), + [ + ...components, + { + [`.${className} .${className}-bleed`]: { + width: '100%', + 'grid-column': '1 / -1', + }, + }, + ], variants('typography') ) } diff --git a/src/styles.js b/src/styles.js index b50d003..1d1fc6d 100644 --- a/src/styles.js +++ b/src/styles.js @@ -13,8 +13,12 @@ module.exports = (theme) => ({ DEFAULT: { css: [ { + display: 'grid', + 'grid-template-columns': '1fr min(65ch, 100%) 1fr', color: theme('colors.gray.700', defaultTheme.colors.gray[700]), - maxWidth: '65ch', + '> *': { + 'grid-column': '2', + }, '[class~="lead"]': { color: theme('colors.gray.600', defaultTheme.colors.gray[600]), },