From f5011ae808998fa30a1bbf5b8f405361018e8c4f Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sat, 24 Oct 2020 12:32:20 +0200 Subject: [PATCH 1/8] WIP Separate config files --- tailwind.base.config.js | 216 +++++++++++++++++++++++++++++++++ tailwind.config.js | 219 ++-------------------------------- tailwind.forms.config.js | 31 +++++ tailwind.typography.config.js | 72 +++++++++++ 4 files changed, 326 insertions(+), 212 deletions(-) create mode 100644 tailwind.base.config.js create mode 100644 tailwind.forms.config.js create mode 100644 tailwind.typography.config.js diff --git a/tailwind.base.config.js b/tailwind.base.config.js new file mode 100644 index 000000000..c5d42206e --- /dev/null +++ b/tailwind.base.config.js @@ -0,0 +1,216 @@ +const plugin = require('tailwindcss/plugin'); +module.exports = { + plugins: [ + //-------------------------------------------------------------------------- + // Tailwind custom Peak plugins + //-------------------------------------------------------------------------- + // + // Here we define base styles used by Peak. You may overwrite those to + // reflect your sites brand or add more. + // + plugin(function({ addBase, theme }) { + addBase({ + ':root': { + // Fluid typography from 1 rem to 1.15 rem with fallback to 16px. + fontSize: '16px', + 'font-size': 'clamp(1rem, 1.6vw, 1.2rem)', + // Safari resize fix. + minHeight: '0vw', + }, + // Used to hide alpine elements before being rendered. + '[x-cloak]': { + display: 'none !important' + }, + // Default color transition on links. + 'a': { + transition: 'color .2s ease-in-out', + }, + 'html': { + fontDisplay: 'swap', + color: theme('colors.neutral.800'), + //-------------------------------------------------------------------------- + // Set sans, serif or mono stack with optional custom font as default. + //-------------------------------------------------------------------------- + // fontFamily: theme('fontFamily.mono').join(', '), + fontFamily: theme('fontFamily.sans').join(', '), + // fontFamily: theme('fontFamily.serif').join(', '), + }, + '::selection': { + backgroundColor: theme('colors.primary.600'), + color: theme('colors.white'), + }, + '::-moz-selection': { + backgroundColor: theme('colors.primary.600'), + color: theme('colors.white'), + }, + //-------------------------------------------------------------------------- + // Display screen breakpoints in debug environment. + //-------------------------------------------------------------------------- + 'body.debug::before': { + display: 'block', + position: 'fixed', + zIndex: '99', + top: theme('spacing.1'), + right: theme('spacing.1'), + padding: theme('spacing.1'), + border: '1px', + borderStyle: 'solid', + borderColor: theme('colors.notice.300'), + borderRadius: theme('borderRadius.full'), + backgroundColor: theme('colors.notice.200'), + fontSize: '.5rem', + color: theme('colors.notice.900'), + textTransform: 'uppercase', + fontWeight: theme('fontWeight.bold'), + content: '"-"', + pointerEvents: 'none', + }, + }) + }), + + plugin(function({ addBase, theme}) { + const breakpoints = _.map(theme('screens'), (value, key) => { + return { + [`@media (min-width: ${value})`]: { + 'body.debug::before': { + content: `"${key}"`, + } + } + } + }) + addBase(breakpoints) + }), + + //-------------------------------------------------------------------------- + // Tailwind custom components + //-------------------------------------------------------------------------- + // + // Here we define custom components used by Peak. + // + plugin(function({ addComponents, theme }) { + const components = { + // The main wrapper for all sections on our website. Has a max width and is centered. + '.fluid-container': { + width: '100%', + maxWidth: theme('screens.2xl'), + marginLeft: 'auto', + marginRight: 'auto', + // Use safe-area-inset together with default padding for Apple devices with a notch. + paddingLeft: 'calc(env(safe-area-inset-left, 0rem) + ' + theme('padding.8') + ')', + paddingRight: 'calc(env(safe-area-inset-right, 0rem) + ' + theme('padding.8') + ')', + }, + // Disable scroll e.g. when a modal is open. Should be used on the + '.no-scroll': { + height: '100%', + overflow: 'hidden', + }, + // The outer grid where all our blocks are a child of. Spreads out all blocks vertically + // with a uniform space between them. + '.outer-grid': { + width: '100%', + display: 'grid', + rowGap: theme('spacing.12'), + paddingTop: theme('spacing.12'), + paddingBottom: theme('spacing.12'), + // If the last child of the outer grid is full width (e.g. when it has a full width + // colored background), give it negative margin bottom to get it flush to your + // sites footer. + '& > *:last-child:has(.w-full)': { + marginBottom: theme('spacing.12') * -1, + }, + }, + [`@media (min-width: ${theme('screens.md')})`]: { + // Larger vertical spacing between blocks on larger screens. + '.outer-grid': { + rowGap: theme('spacing.16'), + paddingTop: theme('spacing.16'), + paddingBottom: theme('spacing.16'), + '& > *:last-child:has(.w-full)': { + marginBottom: theme('spacing.16') * -1, + }, + }, + }, + [`@media (min-width: ${theme('screens.lg')})`]: { + // Larger horizontal padding on larger screens. + '.fluid-container': { + // Use safe-area-inset together with default padding for Apple devices with a notch. + paddingLeft: 'calc(env(safe-area-inset-left, 0rem) + ' + theme('padding.12') + ')', + paddingRight: 'calc(env(safe-area-inset-right, 0rem) + ' + theme('padding.12') + ')', + }, + // Larger vertical spacing between blocks on larger screens. + '.outer-grid': { + rowGap: theme('spacing.24'), + paddingTop: theme('spacing.24'), + paddingBottom: theme('spacing.24'), + '& > *:last-child:has(.w-full)': { + marginBottom: theme('spacing.24') * -1, + }, + }, + }, + } + addComponents(components) + }), + + //-------------------------------------------------------------------------- + // Tailwind custom utilities + //-------------------------------------------------------------------------- + // + // Here we define custom utilities not provided by Tailwind. + // + plugin(function({ addUtilities, theme, variants }) { + const newUtilities = { + // Break words only when needed. + '.break-decent': { + wordBreak: 'break-word', + }, + // Sizing utilities for sets in our bard (long form content). + // On small devices they're full width. + '.size-sm, .size-md, .size-lg, .size-xl': { + gridColumn: 'span 12 / span 12', + }, + [`@media (min-width: ${theme('screens.md')})`]: { + // Sizing utilities for sets in our bard (long form content). + // On larger devices they go from small to extra large. + // (E.g. an image wider then text in an article.) + '.size-sm': { + gridColumn: 'span 4 / span 4', + gridColumnStart: '3', + }, + '.size-md': { + gridColumn: 'span 8 / span 8', + gridColumnStart: '3', + }, + '.size-lg': { + gridColumn: 'span 8 / span 8', + gridColumnStart: '3', + }, + '.size-xl': { + gridColumn: 'span 10 / span 10', + gridColumnStart: '2', + }, + }, + [`@media (min-width: ${theme('screens.lg')})`]: { + // Sizing utilities for sets in our bard (long form content). + // On larger devices they go from small to extra large. + '.size-sm': { + gridColumn: 'span 4 / span 4', + gridColumnStart: '4', + }, + '.size-md': { + gridColumn: 'span 6 / span 6', + gridColumnStart: '4', + }, + '.size-lg': { + gridColumn: 'span 8 / span 8', + gridColumnStart: '3', + }, + '.size-xl': { + gridColumn: 'span 10 / span 10', + gridColumnStart: '2', + }, + }, + } + addUtilities(newUtilities) + }), + ] +} diff --git a/tailwind.config.js b/tailwind.config.js index 212d1f8cd..c7d84d1cc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,6 +11,12 @@ const defaultTheme = require('tailwindcss/defaultTheme') const plugin = require('tailwindcss/plugin') module.exports = { + presets: [ + require('tailwindcss/defaultConfig'), + require('./tailwind.typography.config.js'), + require('./tailwind.forms.config.js'), + require('./tailwind.base.config.js'), + ], future: { defaultLineHeights: true, extendedSpacingScale: true, @@ -266,217 +272,6 @@ module.exports = { }, plugins: [ require('@tailwindcss/typography'), - require('@tailwindcss/custom-forms'), - //-------------------------------------------------------------------------- - // Tailwind custom Peak plugins - //-------------------------------------------------------------------------- - // - // Here we define base styles used by Peak. You may overwrite those to - // reflect your sites brand or add more. - // - plugin(function({ addBase, theme }) { - addBase({ - ':root': { - // Fluid typography from 1 rem to 1.15 rem with fallback to 16px. - fontSize: '16px', - 'font-size': 'clamp(1rem, 1.6vw, 1.2rem)', - // Safari resize fix. - minHeight: '0vw', - }, - // Used to hide alpine elements before being rendered. - '[x-cloak]': { - display: 'none !important' - }, - // Default color transition on links. - 'a': { - transition: 'color .2s ease-in-out', - }, - 'html': { - fontDisplay: 'swap', - color: theme('colors.neutral.800'), - //-------------------------------------------------------------------------- - // Set sans, serif or mono stack with optional custom font as default. - //-------------------------------------------------------------------------- - // fontFamily: theme('fontFamily.mono').join(', '), - fontFamily: theme('fontFamily.sans').join(', '), - // fontFamily: theme('fontFamily.serif').join(', '), - }, - '::selection': { - backgroundColor: theme('colors.primary.600'), - color: theme('colors.white'), - }, - '::-moz-selection': { - backgroundColor: theme('colors.primary.600'), - color: theme('colors.white'), - }, - //-------------------------------------------------------------------------- - // Display screen breakpoints in debug environment. - //-------------------------------------------------------------------------- - 'body.debug::before': { - display: 'block', - position: 'fixed', - zIndex: '99', - top: theme('spacing.1'), - right: theme('spacing.1'), - padding: theme('spacing.1'), - border: '1px', - borderStyle: 'solid', - borderColor: theme('colors.notice.300'), - borderRadius: theme('borderRadius.full'), - backgroundColor: theme('colors.notice.200'), - fontSize: '.5rem', - color: theme('colors.notice.900'), - textTransform: 'uppercase', - fontWeight: theme('fontWeight.bold'), - content: '"-"', - pointerEvents: 'none', - }, - }) - }), - - plugin(function({ addBase, theme}) { - const breakpoints = _.map(theme('screens'), (value, key) => { - return { - [`@media (min-width: ${value})`]: { - 'body.debug::before': { - content: `"${key}"`, - } - } - } - }) - addBase(breakpoints) - }), - - //-------------------------------------------------------------------------- - // Tailwind custom components - //-------------------------------------------------------------------------- - // - // Here we define custom components used by Peak. - // - plugin(function({ addComponents, theme }) { - const components = { - // The main wrapper for all sections on our website. Has a max width and is centered. - '.fluid-container': { - width: '100%', - maxWidth: theme('screens.2xl'), - marginLeft: 'auto', - marginRight: 'auto', - // Use safe-area-inset together with default padding for Apple devices with a notch. - paddingLeft: 'calc(env(safe-area-inset-left, 0rem) + ' + theme('padding.8') + ')', - paddingRight: 'calc(env(safe-area-inset-right, 0rem) + ' + theme('padding.8') + ')', - }, - // Disable scroll e.g. when a modal is open. Should be used on the - '.no-scroll': { - height: '100%', - overflow: 'hidden', - }, - // The outer grid where all our blocks are a child of. Spreads out all blocks vertically - // with a uniform space between them. - '.outer-grid': { - width: '100%', - display: 'grid', - rowGap: theme('spacing.12'), - paddingTop: theme('spacing.12'), - paddingBottom: theme('spacing.12'), - // If the last child of the outer grid is full width (e.g. when it has a full width - // colored background), give it negative margin bottom to get it flush to your - // sites footer. - '& > *:last-child:has(.w-full)': { - marginBottom: theme('spacing.12') * -1, - }, - }, - [`@media (min-width: ${theme('screens.md')})`]: { - // Larger vertical spacing between blocks on larger screens. - '.outer-grid': { - rowGap: theme('spacing.16'), - paddingTop: theme('spacing.16'), - paddingBottom: theme('spacing.16'), - '& > *:last-child:has(.w-full)': { - marginBottom: theme('spacing.16') * -1, - }, - }, - }, - [`@media (min-width: ${theme('screens.lg')})`]: { - // Larger horizontal padding on larger screens. - '.fluid-container': { - // Use safe-area-inset together with default padding for Apple devices with a notch. - paddingLeft: 'calc(env(safe-area-inset-left, 0rem) + ' + theme('padding.12') + ')', - paddingRight: 'calc(env(safe-area-inset-right, 0rem) + ' + theme('padding.12') + ')', - }, - // Larger vertical spacing between blocks on larger screens. - '.outer-grid': { - rowGap: theme('spacing.24'), - paddingTop: theme('spacing.24'), - paddingBottom: theme('spacing.24'), - '& > *:last-child:has(.w-full)': { - marginBottom: theme('spacing.24') * -1, - }, - }, - }, - } - addComponents(components) - }), - - //-------------------------------------------------------------------------- - // Tailwind custom utilities - //-------------------------------------------------------------------------- - // - // Here we define custom utilities not provided by Tailwind. - // - plugin(function({ addUtilities, theme, variants }) { - const newUtilities = { - // Break words only when needed. - '.break-decent': { - wordBreak: 'break-word', - }, - // Sizing utilities for sets in our bard (long form content). - // On small devices they're full width. - '.size-sm, .size-md, .size-lg, .size-xl': { - gridColumn: 'span 12 / span 12', - }, - [`@media (min-width: ${theme('screens.md')})`]: { - // Sizing utilities for sets in our bard (long form content). - // On larger devices they go from small to extra large. - // (E.g. an image wider then text in an article.) - '.size-sm': { - gridColumn: 'span 4 / span 4', - gridColumnStart: '3', - }, - '.size-md': { - gridColumn: 'span 8 / span 8', - gridColumnStart: '3', - }, - '.size-lg': { - gridColumn: 'span 8 / span 8', - gridColumnStart: '3', - }, - '.size-xl': { - gridColumn: 'span 10 / span 10', - gridColumnStart: '2', - }, - }, - [`@media (min-width: ${theme('screens.lg')})`]: { - // Sizing utilities for sets in our bard (long form content). - // On larger devices they go from small to extra large. - '.size-sm': { - gridColumn: 'span 4 / span 4', - gridColumnStart: '4', - }, - '.size-md': { - gridColumn: 'span 6 / span 6', - gridColumnStart: '4', - }, - '.size-lg': { - gridColumn: 'span 8 / span 8', - gridColumnStart: '3', - }, - '.size-xl': { - gridColumn: 'span 10 / span 10', - gridColumnStart: '2', - }, - }, - } - addUtilities(newUtilities) - }), + require('@tailwindcss/custom-forms') ] } diff --git a/tailwind.forms.config.js b/tailwind.forms.config.js new file mode 100644 index 000000000..e5eea77d3 --- /dev/null +++ b/tailwind.forms.config.js @@ -0,0 +1,31 @@ +//-------------------------------------------------------------------------- +// Tailwind Custom Forms configuration +//-------------------------------------------------------------------------- +// +// Here you may overwrite the default Tailwind Custom Forms styles. +// Some defaults are provided. +// More info: https://github.com/tailwindlabs/tailwindcss-custom-forms. +// + +const plugin = require('tailwindcss/plugin'); + +module.exports = { + theme: { + customForms: theme => ({ + default: { + input: { + borderColor: theme('colors.neutral.300'), + color: theme('colors.neutral.800'), + }, + }, + error: { + 'input, textarea': { + borderColor: theme('colors.error.700'), + }, + }, + }) + }, + plugins: [ + require('@tailwindcss/typography'), + ] +} diff --git a/tailwind.typography.config.js b/tailwind.typography.config.js new file mode 100644 index 000000000..fa4bf45d0 --- /dev/null +++ b/tailwind.typography.config.js @@ -0,0 +1,72 @@ +//-------------------------------------------------------------------------- +// Tailwind Typography configuration +//-------------------------------------------------------------------------- +// +// Here you may overwrite the default Tailwind Typography (or prosé) styles. +// Some defaults are provided. +// More info: https://github.com/tailwindcss/typography. +// + +const plugin = require('tailwindcss/plugin'); + +module.exports = { + theme: { + typography: (theme) => ({ + default: { + css: { + color: theme('colors.neutral.800'), + '[class~="lead"]': { + color: theme('colors.neutral.800'), + }, + a: { + color: theme('colors.primary.600'), + '&:hover': { + color: theme('colors.primary.800'), + }, + }, + 'a.no-underline': { + textDecoration: 'none', + }, + 'h1, h2, h3, h4': { + scrollMarginTop: theme('spacing.36'), + color: theme('colors.neutral.900'), + }, + blockquote: { + borderColor: theme('colors.primary.200'), + }, + hr: { + borderColor: theme('colors.neutral.100'), + }, + 'figure, img, picture, video, code': { + marginTop: 0, + marginBottom: 0, + }, + 'figure figcaption': { + color: 'inherit', + }, + 'ul > li::before': { + backgroundColor: theme('colors.neutral.500'), + }, + 'ol > li::before': { + color: theme('colors.neutral.500'), + }, + 'figure figcaption': { + color: theme('colors.neutral.500'), + }, + thead: { + borderBottomColor: theme('colors.neutral.200'), + }, + 'tbody tr': { + borderBottomColor: theme('colors.neutral.100'), + }, + pre: { + whiteSpace: 'pre-wrap', + }, + } + } + }), + }, + plugins: [ + require('@tailwindcss/typography'), + ] +} From ecafc20dea90fb5a6d8730e90eac30bbd98e777b Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sat, 24 Oct 2020 21:10:44 +0200 Subject: [PATCH 2/8] WIP add peak config file --- tailwind.config.js | 221 +----------------- ....base.config.js => tailwind.peak.config.js | 47 ++-- tailwind.site.config.js | 121 ++++++++++ 3 files changed, 155 insertions(+), 234 deletions(-) rename tailwind.base.config.js => tailwind.peak.config.js (89%) create mode 100644 tailwind.site.config.js diff --git a/tailwind.config.js b/tailwind.config.js index c7d84d1cc..86bd22321 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,8 @@ //-------------------------------------------------------------------------- // // Use this file to completely define the current sites design system by -// adding and extending to Tailwinds default utility classes. +// adding and extending to Tailwinds default utility classes. Various +// aspects are split up in to multiple files. // const _ = require('lodash') @@ -13,9 +14,11 @@ const plugin = require('tailwindcss/plugin') module.exports = { presets: [ require('tailwindcss/defaultConfig'), + require('./tailwind.peak.config.js'), require('./tailwind.typography.config.js'), require('./tailwind.forms.config.js'), - require('./tailwind.base.config.js'), + require('./tailwind.site.config.js') + ], future: { defaultLineHeights: true, @@ -44,214 +47,6 @@ module.exports = { whitelist: ['size-sm', 'size-md', 'size-lg', 'size-xl'] } }, - theme: { - //-------------------------------------------------------------------------- - // Color configuration - //-------------------------------------------------------------------------- - // - // Here you may register all of the colors you need for this project. - // These colors overwrite all the default Tailwind colors. If you don't want - // this you should remove this part and extend color instead. - // - // You can also create your own colors on https://javisperez.github.io/tailwindcolorshades/#/ - // - colors: { - transparent: 'transparent', - black: '#000', - white: '#fff', - // Grays (default TW gray) - neutral: { - 100: '#f7fafc', - 200: '#edf2f7', - 300: '#e2e8f0', - 400: '#cbd5e0', - 500: '#a0aec0', - 600: '#718096', - 700: '#4a5568', - 800: '#2d3748', - 900: '#1a202c', - }, - // Client primary color, currently blue. - primary: { - 100: '#ebf8ff', - 200: '#bee3f8', - 300: '#90cdf4', - 400: '#63b3ed', - 500: '#4299e1', - 600: '#3182ce', - 700: '#2b6cb0', - 800: '#2c5282', - 900: '#2a4365', - }, - // Error styling colors: red (TW Red) - error: { - 50: '#FDF2F2', - 100: '#FCE8E8', - 200: '#FBD5D5', - 300: '#F8B4B3', - 400: '#F88080', - 500: '#F05252', - 600: '#E02423', - 700: '#C81F1D', - 800: '#9B1D1C', - 900: '#771D1D', - }, - // Notice styling colors: yellow (TW Yellow) - notice: { - 50: '#FDFDEA', - 100: '#FDF5B2', - 200: '#FCE96B', - 300: '#FACA16', - 400: '#E3A009', - 500: '#C27805', - 600: '#9F580B', - 700: '#8E4B10', - 800: '#723A14', - 900: '#643112', - }, - // Success styling colors: green (TW Green) - success: { - 50: '#F3FAF7', - 100: '#DEF7EC', - 200: '#BBF0DA', - 300: '#84E1BC', - 400: '#30C48D', - 500: '#0D9F6E', - 600: '#047A55', - 700: '#036C4E', - 800: '#06543F', - 900: '#024737', - }, - }, - //-------------------------------------------------------------------------- - // Extend configuration - //-------------------------------------------------------------------------- - // - // Here you may extend Tailwinds utility classes. Some defaults are - // provided. - // - extend: { - fontFamily: { - mono: [ - // Use a custom mono font for this site by changing 'Anonymous' to the - // font name you want and uncommenting the following line. - // 'Anonymous', - ...defaultTheme.fontFamily.mono, - ], - sans: [ - // Use a custom sans serif font for this site by changing 'Gaultier' to the - // font name you want and uncommenting the following line. - // 'Gaultier', - ...defaultTheme.fontFamily.sans, - ], - serif: [ - // Use a custom serif font for this site by changing 'Lavigne' to the - // font name you want and uncommenting the following line. - // 'Lavigne', - ...defaultTheme.fontFamily.serif, - ], - }, - padding: { - // Used to generate responsive video embeds. - 'video': '56.25%', - }, - screens: { - // Add a slightly wider breakpoint. - '2xl': '1440px', - }, - spacing: { - // Used for the mobile navigation toggle. - 'safe': 'calc(env(safe-area-inset-bottom, 0rem) + 2rem)', - }, - zIndex: { - // Z-index stuff behind it's parent. - 'behind': '-1', - }, - }, - //-------------------------------------------------------------------------- - // Tailwind Typography configuration - //-------------------------------------------------------------------------- - // - // Here you may overwrite the default Tailwind Typography (or prosé) styles. - // Some defaults are provided. - // More info: https://github.com/tailwindcss/typography. - // - typography: (theme) => ({ - default: { - css: { - color: theme('colors.neutral.800'), - '[class~="lead"]': { - color: theme('colors.neutral.800'), - }, - a: { - color: theme('colors.primary.600'), - '&:hover': { - color: theme('colors.primary.800'), - }, - }, - 'a.no-underline': { - textDecoration: 'none', - }, - 'h1, h2, h3, h4': { - scrollMarginTop: theme('spacing.36'), - color: theme('colors.neutral.900'), - }, - blockquote: { - borderColor: theme('colors.primary.200'), - }, - hr: { - borderColor: theme('colors.neutral.100'), - }, - 'figure, img, picture, video, code': { - marginTop: 0, - marginBottom: 0, - }, - 'figure figcaption': { - color: 'inherit', - }, - 'ul > li::before': { - backgroundColor: theme('colors.neutral.500'), - }, - 'ol > li::before': { - color: theme('colors.neutral.500'), - }, - 'figure figcaption': { - color: theme('colors.neutral.500'), - }, - thead: { - borderBottomColor: theme('colors.neutral.200'), - }, - 'tbody tr': { - borderBottomColor: theme('colors.neutral.100'), - }, - pre: { - whiteSpace: 'pre-wrap', - }, - } - } - }), - //-------------------------------------------------------------------------- - // Tailwind Custom Forms configuration - //-------------------------------------------------------------------------- - // - // Here you may overwrite the default Tailwind Custom Forms styles. - // Some defaults are provided. - // More info: https://github.com/tailwindlabs/tailwindcss-custom-forms. - // - customForms: theme => ({ - default: { - input: { - borderColor: theme('colors.neutral.300'), - color: theme('colors.neutral.800'), - }, - }, - error: { - 'input, textarea': { - borderColor: theme('colors.error.700'), - }, - }, - }) - }, //-------------------------------------------------------------------------- // Tailwind variants configuration //-------------------------------------------------------------------------- @@ -269,9 +64,5 @@ module.exports = { rotate: ['responsive', 'hover', 'focus', 'group-hover'], textColor: ['responsive', 'hover', 'focus', 'group-hover'], translate: ['responsive', 'hover', 'focus', 'group-hover'], - }, - plugins: [ - require('@tailwindcss/typography'), - require('@tailwindcss/custom-forms') - ] + } } diff --git a/tailwind.base.config.js b/tailwind.peak.config.js similarity index 89% rename from tailwind.base.config.js rename to tailwind.peak.config.js index c5d42206e..61b634e21 100644 --- a/tailwind.base.config.js +++ b/tailwind.peak.config.js @@ -1,13 +1,34 @@ +//-------------------------------------------------------------------------- +// Tailwind custom Peak configuration +//-------------------------------------------------------------------------- +// +// Here we define base styles, components and utilities used by Peak. You +// may overwrite those to reflect your sites brand or add more. +// + const plugin = require('tailwindcss/plugin'); module.exports = { + theme: { + extend: { + padding: { + // Used to generate responsive video embeds. + 'video': '56.25%', + }, + screens: { + // Add a slightly wider breakpoint. + '2xl': '1440px', + }, + spacing: { + // Used for the mobile navigation toggle. + 'safe': 'calc(env(safe-area-inset-bottom, 0rem) + 2rem)', + }, + zIndex: { + // Z-index stuff behind it's parent. + 'behind': '-1', + }, + }, + }, plugins: [ - //-------------------------------------------------------------------------- - // Tailwind custom Peak plugins - //-------------------------------------------------------------------------- - // - // Here we define base styles used by Peak. You may overwrite those to - // reflect your sites brand or add more. - // plugin(function({ addBase, theme }) { addBase({ ':root': { @@ -81,12 +102,6 @@ module.exports = { addBase(breakpoints) }), - //-------------------------------------------------------------------------- - // Tailwind custom components - //-------------------------------------------------------------------------- - // - // Here we define custom components used by Peak. - // plugin(function({ addComponents, theme }) { const components = { // The main wrapper for all sections on our website. Has a max width and is centered. @@ -151,12 +166,6 @@ module.exports = { addComponents(components) }), - //-------------------------------------------------------------------------- - // Tailwind custom utilities - //-------------------------------------------------------------------------- - // - // Here we define custom utilities not provided by Tailwind. - // plugin(function({ addUtilities, theme, variants }) { const newUtilities = { // Break words only when needed. diff --git a/tailwind.site.config.js b/tailwind.site.config.js new file mode 100644 index 000000000..2c9718be3 --- /dev/null +++ b/tailwind.site.config.js @@ -0,0 +1,121 @@ +//-------------------------------------------------------------------------- +// Tailwind site configuration +//-------------------------------------------------------------------------- +// +// Use this file to completely define the current sites design system by +// adding and extending to Tailwinds default utility classes. +// + +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + theme: { + //-------------------------------------------------------------------------- + // Color configuration + //-------------------------------------------------------------------------- + // + // Here you may register all of the colors you need for this project. + // These colors overwrite all the default Tailwind colors. If you don't want + // this you should remove this part and extend color instead. + // + // You can also create your own colors on https://javisperez.github.io/tailwindcolorshades/#/ + // + colors: { + transparent: 'transparent', + black: '#000', + white: '#fff', + // Grays (default TW gray) + neutral: { + 100: '#f7fafc', + 200: '#edf2f7', + 300: '#e2e8f0', + 400: '#cbd5e0', + 500: '#a0aec0', + 600: '#718096', + 700: '#4a5568', + 800: '#2d3748', + 900: '#1a202c', + }, + // Client primary color, currently blue. + primary: { + 100: '#ebf8ff', + 200: '#bee3f8', + 300: '#90cdf4', + 400: '#63b3ed', + 500: '#4299e1', + 600: '#3182ce', + 700: '#2b6cb0', + 800: '#2c5282', + 900: '#2a4365', + }, + // Error styling colors: red (TW Red) + error: { + 50: '#FDF2F2', + 100: '#FCE8E8', + 200: '#FBD5D5', + 300: '#F8B4B3', + 400: '#F88080', + 500: '#F05252', + 600: '#E02423', + 700: '#C81F1D', + 800: '#9B1D1C', + 900: '#771D1D', + }, + // Notice styling colors: yellow (TW Yellow) + notice: { + 50: '#FDFDEA', + 100: '#FDF5B2', + 200: '#FCE96B', + 300: '#FACA16', + 400: '#E3A009', + 500: '#C27805', + 600: '#9F580B', + 700: '#8E4B10', + 800: '#723A14', + 900: '#643112', + }, + // Success styling colors: green (TW Green) + success: { + 50: '#F3FAF7', + 100: '#DEF7EC', + 200: '#BBF0DA', + 300: '#84E1BC', + 400: '#30C48D', + 500: '#0D9F6E', + 600: '#047A55', + 700: '#036C4E', + 800: '#06543F', + 900: '#024737', + }, + }, + //-------------------------------------------------------------------------- + // Extend configuration + //-------------------------------------------------------------------------- + // + // Here you may extend Tailwinds utility classes. Some defaults are + // provided. + // + extend: { + fontFamily: { + mono: [ + // Use a custom mono font for this site by changing 'Anonymous' to the + // font name you want and uncommenting the following line. + // 'Anonymous', + ...defaultTheme.fontFamily.mono, + ], + sans: [ + // Use a custom sans serif font for this site by changing 'Gaultier' to the + // font name you want and uncommenting the following line. + // 'Gaultier', + ...defaultTheme.fontFamily.sans, + ], + serif: [ + // Use a custom serif font for this site by changing 'Lavigne' to the + // font name you want and uncommenting the following line. + // 'Lavigne', + ...defaultTheme.fontFamily.serif, + ], + } + } + } +} From edb655ecec45b5f571fd30926ac2c0534bf8e106 Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sat, 24 Oct 2020 21:18:14 +0200 Subject: [PATCH 3/8] Fix custom form config and update order --- tailwind.config.js | 5 ++--- tailwind.forms.config.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 86bd22321..b43b1122f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,11 +14,10 @@ const plugin = require('tailwindcss/plugin') module.exports = { presets: [ require('tailwindcss/defaultConfig'), - require('./tailwind.peak.config.js'), require('./tailwind.typography.config.js'), require('./tailwind.forms.config.js'), - require('./tailwind.site.config.js') - + require('./tailwind.peak.config.js'), + require('./tailwind.site.config.js'), ], future: { defaultLineHeights: true, diff --git a/tailwind.forms.config.js b/tailwind.forms.config.js index e5eea77d3..67146b017 100644 --- a/tailwind.forms.config.js +++ b/tailwind.forms.config.js @@ -26,6 +26,6 @@ module.exports = { }) }, plugins: [ - require('@tailwindcss/typography'), + require('@tailwindcss/custom-forms'), ] } From 1fa0073200ecf57e6f42911b0176466e5e463195 Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sat, 24 Oct 2020 21:36:55 +0200 Subject: [PATCH 4/8] Finish first draft --- ...orms.config.js => tailwind.config.forms.js | 4 +- tailwind.config.js | 23 ++------- ....peak.config.js => tailwind.config.peak.js | 27 +---------- ....site.config.js => tailwind.config.site.js | 47 ++++++++++++------- ...config.js => tailwind.config.typography.js | 2 +- 5 files changed, 40 insertions(+), 63 deletions(-) rename tailwind.forms.config.js => tailwind.config.forms.js (94%) rename tailwind.peak.config.js => tailwind.config.peak.js (85%) rename tailwind.site.config.js => tailwind.config.site.js (73%) rename tailwind.typography.config.js => tailwind.config.typography.js (97%) diff --git a/tailwind.forms.config.js b/tailwind.config.forms.js similarity index 94% rename from tailwind.forms.config.js rename to tailwind.config.forms.js index 67146b017..ab465b41d 100644 --- a/tailwind.forms.config.js +++ b/tailwind.config.forms.js @@ -7,7 +7,7 @@ // More info: https://github.com/tailwindlabs/tailwindcss-custom-forms. // -const plugin = require('tailwindcss/plugin'); +const plugin = require('tailwindcss/plugin') module.exports = { theme: { @@ -28,4 +28,4 @@ module.exports = { plugins: [ require('@tailwindcss/custom-forms'), ] -} +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index b43b1122f..0909dec05 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,10 +14,10 @@ const plugin = require('tailwindcss/plugin') module.exports = { presets: [ require('tailwindcss/defaultConfig'), - require('./tailwind.typography.config.js'), - require('./tailwind.forms.config.js'), - require('./tailwind.peak.config.js'), - require('./tailwind.site.config.js'), + require('./tailwind.config.typography.js'), + require('./tailwind.config.forms.js'), + require('./tailwind.config.peak.js'), + require('./tailwind.config.site.js'), ], future: { defaultLineHeights: true, @@ -26,13 +26,6 @@ module.exports = { standardFontWeights: true, removeDeprecatedGapUtilities: true, }, - //-------------------------------------------------------------------------- - // Dark mode (experimental) - //-------------------------------------------------------------------------- - // - // Uncomment the following to use experimental dark mode support. - // More info: https://github.com/tailwindlabs/tailwindcss/pull/2279 - // // dark: 'media', // or 'class' // experimental { // darkModeVariant: true, @@ -46,14 +39,6 @@ module.exports = { whitelist: ['size-sm', 'size-md', 'size-lg', 'size-xl'] } }, - //-------------------------------------------------------------------------- - // Tailwind variants configuration - //-------------------------------------------------------------------------- - // - // Here you may extend the variants Tailwind generates. - // Some often used group-hover variants are added here. - // More info: https://tailwindcss.com/docs/configuration/#app - // variants: { boxShadow: ['responsive', 'hover', 'focus', 'group-hover'], backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'], diff --git a/tailwind.peak.config.js b/tailwind.config.peak.js similarity index 85% rename from tailwind.peak.config.js rename to tailwind.config.peak.js index 61b634e21..d92191972 100644 --- a/tailwind.peak.config.js +++ b/tailwind.config.peak.js @@ -6,7 +6,8 @@ // may overwrite those to reflect your sites brand or add more. // -const plugin = require('tailwindcss/plugin'); +const plugin = require('tailwindcss/plugin') + module.exports = { theme: { extend: { @@ -42,31 +43,7 @@ module.exports = { '[x-cloak]': { display: 'none !important' }, - // Default color transition on links. - 'a': { - transition: 'color .2s ease-in-out', - }, - 'html': { - fontDisplay: 'swap', - color: theme('colors.neutral.800'), - //-------------------------------------------------------------------------- - // Set sans, serif or mono stack with optional custom font as default. - //-------------------------------------------------------------------------- - // fontFamily: theme('fontFamily.mono').join(', '), - fontFamily: theme('fontFamily.sans').join(', '), - // fontFamily: theme('fontFamily.serif').join(', '), - }, - '::selection': { - backgroundColor: theme('colors.primary.600'), - color: theme('colors.white'), - }, - '::-moz-selection': { - backgroundColor: theme('colors.primary.600'), - color: theme('colors.white'), - }, - //-------------------------------------------------------------------------- // Display screen breakpoints in debug environment. - //-------------------------------------------------------------------------- 'body.debug::before': { display: 'block', position: 'fixed', diff --git a/tailwind.site.config.js b/tailwind.config.site.js similarity index 73% rename from tailwind.site.config.js rename to tailwind.config.site.js index 2c9718be3..3459504f9 100644 --- a/tailwind.site.config.js +++ b/tailwind.config.site.js @@ -7,19 +7,13 @@ // const defaultTheme = require('tailwindcss/defaultTheme') +const plugin = require('tailwindcss/plugin') module.exports = { theme: { - //-------------------------------------------------------------------------- - // Color configuration - //-------------------------------------------------------------------------- - // - // Here you may register all of the colors you need for this project. + // Here you may register all of the colors you need for this project. // These colors overwrite all the default Tailwind colors. If you don't want // this you should remove this part and extend color instead. - // - // You can also create your own colors on https://javisperez.github.io/tailwindcolorshades/#/ - // colors: { transparent: 'transparent', black: '#000', @@ -88,13 +82,6 @@ module.exports = { 900: '#024737', }, }, - //-------------------------------------------------------------------------- - // Extend configuration - //-------------------------------------------------------------------------- - // - // Here you may extend Tailwinds utility classes. Some defaults are - // provided. - // extend: { fontFamily: { mono: [ @@ -117,5 +104,33 @@ module.exports = { ], } } - } + }, + plugins: [ + plugin(function({ addBase, theme }) { + addBase({ + // Default color transition on links. + 'a': { + transition: 'color .2s ease-in-out', + }, + 'html': { + fontDisplay: 'swap', + color: theme('colors.neutral.800'), + //-------------------------------------------------------------------------- + // Set sans, serif or mono stack with optional custom font as default. + //-------------------------------------------------------------------------- + // fontFamily: theme('fontFamily.mono').join(', '), + fontFamily: theme('fontFamily.sans').join(', '), + // fontFamily: theme('fontFamily.serif').join(', '), + }, + '::selection': { + backgroundColor: theme('colors.primary.600'), + color: theme('colors.white'), + }, + '::-moz-selection': { + backgroundColor: theme('colors.primary.600'), + color: theme('colors.white'), + }, + }) + }), + ] } diff --git a/tailwind.typography.config.js b/tailwind.config.typography.js similarity index 97% rename from tailwind.typography.config.js rename to tailwind.config.typography.js index fa4bf45d0..4f321b7a2 100644 --- a/tailwind.typography.config.js +++ b/tailwind.config.typography.js @@ -7,7 +7,7 @@ // More info: https://github.com/tailwindcss/typography. // -const plugin = require('tailwindcss/plugin'); +const plugin = require('tailwindcss/plugin') module.exports = { theme: { From ce29b0fea6b3fbcea5718c545b607c667b40063b Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sun, 25 Oct 2020 12:09:38 +0100 Subject: [PATCH 5/8] Update inline Tailwind documentation --- tailwind.config.js | 21 +++++++++++++-------- tailwind.config.peak.js | 8 ++++---- tailwind.config.site.js | 17 ++++++++++++++++- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 0909dec05..123f2f6b2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,9 +2,9 @@ // Tailwind configuration //-------------------------------------------------------------------------- // -// Use this file to completely define the current sites design system by -// adding and extending to Tailwinds default utility classes. Various -// aspects are split up in to multiple files. +// Use the Tailwind configuration to completely define the current sites +// design system by adding and extending to Tailwinds default utility +// classes. Various aspects of the config are split inmultiple files. // const _ = require('lodash') @@ -12,6 +12,7 @@ const defaultTheme = require('tailwindcss/defaultTheme') const plugin = require('tailwindcss/plugin') module.exports = { + // The various configurable Tailwind configuration files. presets: [ require('tailwindcss/defaultConfig'), require('./tailwind.config.typography.js'), @@ -19,6 +20,7 @@ module.exports = { require('./tailwind.config.peak.js'), require('./tailwind.config.site.js'), ], + // Opt in to future Tailwind features. future: { defaultLineHeights: true, extendedSpacingScale: true, @@ -26,10 +28,12 @@ module.exports = { standardFontWeights: true, removeDeprecatedGapUtilities: true, }, - // dark: 'media', // or 'class' - // experimental { - // darkModeVariant: true, - // }, + // Dark mode + dark: 'media', // or 'class' + experimental: { + darkModeVariant: false, + }, + // Configure Purge CSS. purge: { content: [ './resources/views/**/*.html', @@ -38,7 +42,8 @@ module.exports = { options: { whitelist: ['size-sm', 'size-md', 'size-lg', 'size-xl'] } - }, + }, + // Define all variants available. variants: { boxShadow: ['responsive', 'hover', 'focus', 'group-hover'], backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'], diff --git a/tailwind.config.peak.js b/tailwind.config.peak.js index d92191972..d7b8dffd5 100644 --- a/tailwind.config.peak.js +++ b/tailwind.config.peak.js @@ -2,8 +2,7 @@ // Tailwind custom Peak configuration //-------------------------------------------------------------------------- // -// Here we define base styles, components and utilities used by Peak. You -// may overwrite those to reflect your sites brand or add more. +// Here we define base styles, components and utilities used by Peak. // const plugin = require('tailwindcss/plugin') @@ -66,6 +65,7 @@ module.exports = { }) }), + // Render screen names in the breakpoint display. plugin(function({ addBase, theme}) { const breakpoints = _.map(theme('screens'), (value, key) => { return { @@ -96,8 +96,8 @@ module.exports = { height: '100%', overflow: 'hidden', }, - // The outer grid where all our blocks are a child of. Spreads out all blocks vertically - // with a uniform space between them. + // The outer grid where all block builder blocks are a child of. Spreads out all blocks + // vertically with a uniform space between them. '.outer-grid': { width: '100%', display: 'grid', diff --git a/tailwind.config.site.js b/tailwind.config.site.js index 3459504f9..a42c32504 100644 --- a/tailwind.config.site.js +++ b/tailwind.config.site.js @@ -13,7 +13,7 @@ module.exports = { theme: { // Here you may register all of the colors you need for this project. // These colors overwrite all the default Tailwind colors. If you don't want - // this you should remove this part and extend color instead. + // this you should remove this part and extend colors instead. colors: { transparent: 'transparent', black: '#000', @@ -132,5 +132,20 @@ module.exports = { }, }) }), + + // Custom components for this particular site. + plugin(function({ addComponents, theme }) { + const components = { + + } + addComponents(components) + }), + + // Custom utilities for this particular site. + plugin(function({ addUtilities, theme, variants }) { + const newUtilities = { + } + addUtilities(newUtilities) + }), ] } From 8b2ea730e38536698f9c682c717ae4ff8062db9f Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sun, 25 Oct 2020 12:17:09 +0100 Subject: [PATCH 6/8] Turn off source maps by default --- webpack.mix.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.mix.js b/webpack.mix.js index 8412e8635..27ea016a4 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -5,7 +5,7 @@ mix.js('resources/js/site.js', 'public/js/site.js') .modernizr({ Modernizr: 'modernizr.config.js' }) - .sourceMaps() + .sourceMaps(false) mix.postCss('resources/css/site.css', 'public/css/site.css', [ require('postcss-import'), From 8c41e806a3c6c7bbe9a6c2a672aa3bad9fc2dbc7 Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Sun, 25 Oct 2020 12:31:15 +0100 Subject: [PATCH 7/8] Split default and site colors up --- tailwind.config.peak.js | 46 +++++++++++++++++++ tailwind.config.site.js | 98 ++++++++++++----------------------------- 2 files changed, 73 insertions(+), 71 deletions(-) diff --git a/tailwind.config.peak.js b/tailwind.config.peak.js index d7b8dffd5..6b8476648 100644 --- a/tailwind.config.peak.js +++ b/tailwind.config.peak.js @@ -9,6 +9,52 @@ const plugin = require('tailwindcss/plugin') module.exports = { theme: { + // Here we define the default colors available. You should extend + // these in tailwind.config.site.js for the current project colors. + colors: { + transparent: 'transparent', + black: '#000', + white: '#fff', + // Error styling colors: red (TW Red) + error: { + 50: '#FDF2F2', + 100: '#FCE8E8', + 200: '#FBD5D5', + 300: '#F8B4B3', + 400: '#F88080', + 500: '#F05252', + 600: '#E02423', + 700: '#C81F1D', + 800: '#9B1D1C', + 900: '#771D1D', + }, + // Notice styling colors: yellow (TW Yellow) + notice: { + 50: '#FDFDEA', + 100: '#FDF5B2', + 200: '#FCE96B', + 300: '#FACA16', + 400: '#E3A009', + 500: '#C27805', + 600: '#9F580B', + 700: '#8E4B10', + 800: '#723A14', + 900: '#643112', + }, + // Success styling colors: green (TW Green) + success: { + 50: '#F3FAF7', + 100: '#DEF7EC', + 200: '#BBF0DA', + 300: '#84E1BC', + 400: '#30C48D', + 500: '#0D9F6E', + 600: '#047A55', + 700: '#036C4E', + 800: '#06543F', + 900: '#024737', + }, + }, extend: { padding: { // Used to generate responsive video embeds. diff --git a/tailwind.config.site.js b/tailwind.config.site.js index a42c32504..59ff8ee49 100644 --- a/tailwind.config.site.js +++ b/tailwind.config.site.js @@ -11,78 +11,34 @@ const plugin = require('tailwindcss/plugin') module.exports = { theme: { - // Here you may register all of the colors you need for this project. - // These colors overwrite all the default Tailwind colors. If you don't want - // this you should remove this part and extend colors instead. - colors: { - transparent: 'transparent', - black: '#000', - white: '#fff', - // Grays (default TW gray) - neutral: { - 100: '#f7fafc', - 200: '#edf2f7', - 300: '#e2e8f0', - 400: '#cbd5e0', - 500: '#a0aec0', - 600: '#718096', - 700: '#4a5568', - 800: '#2d3748', - 900: '#1a202c', - }, - // Client primary color, currently blue. - primary: { - 100: '#ebf8ff', - 200: '#bee3f8', - 300: '#90cdf4', - 400: '#63b3ed', - 500: '#4299e1', - 600: '#3182ce', - 700: '#2b6cb0', - 800: '#2c5282', - 900: '#2a4365', - }, - // Error styling colors: red (TW Red) - error: { - 50: '#FDF2F2', - 100: '#FCE8E8', - 200: '#FBD5D5', - 300: '#F8B4B3', - 400: '#F88080', - 500: '#F05252', - 600: '#E02423', - 700: '#C81F1D', - 800: '#9B1D1C', - 900: '#771D1D', - }, - // Notice styling colors: yellow (TW Yellow) - notice: { - 50: '#FDFDEA', - 100: '#FDF5B2', - 200: '#FCE96B', - 300: '#FACA16', - 400: '#E3A009', - 500: '#C27805', - 600: '#9F580B', - 700: '#8E4B10', - 800: '#723A14', - 900: '#643112', - }, - // Success styling colors: green (TW Green) - success: { - 50: '#F3FAF7', - 100: '#DEF7EC', - 200: '#BBF0DA', - 300: '#84E1BC', - 400: '#30C48D', - 500: '#0D9F6E', - 600: '#047A55', - 700: '#036C4E', - 800: '#06543F', - 900: '#024737', - }, - }, extend: { + // Extend the base colors defined in tailwind.config.peak.js for the current site. + colors: { + // Grays (default TW gray) + neutral: { + 100: '#f7fafc', + 200: '#edf2f7', + 300: '#e2e8f0', + 400: '#cbd5e0', + 500: '#a0aec0', + 600: '#718096', + 700: '#4a5568', + 800: '#2d3748', + 900: '#1a202c', + }, + // Client primary color, currently blue. + primary: { + 100: '#ebf8ff', + 200: '#bee3f8', + 300: '#90cdf4', + 400: '#63b3ed', + 500: '#4299e1', + 600: '#3182ce', + 700: '#2b6cb0', + 800: '#2c5282', + 900: '#2a4365', + }, + }, fontFamily: { mono: [ // Use a custom mono font for this site by changing 'Anonymous' to the From 56a7f28c319529a1aa220244f3d1b2c76b371148 Mon Sep 17 00:00:00 2001 From: Rob de Kort Date: Mon, 26 Oct 2020 09:57:56 +0100 Subject: [PATCH 8/8] Update README --- README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e634fa740..02d3202f9 100644 --- a/README.md +++ b/README.md @@ -95,9 +95,16 @@ npm run production ## Tailwind configuration -Peak comes with `tailwind.config.js` which dictates how Tailwind should be compiled. Everything is configured in a single Javascript file. This makes it very easy to define your unique design system for each website you're building. The file is fully documented. Read the Tailwind docs on [theme configuration](https://tailwindcss.com/docs/theme/) for more information. +Peak comes with a `tailwind.config.js` which dictates how Tailwind should be compiled. This file imports multiple Tailwind config files each responsable for various parts of your website. Next to the default config, it uses the following configuration files: -The config file also includes the [Tailwind Custom Forms](https://tailwindcss-custom-forms.netlify.app) and [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) plugins. They're easy to customize and the config file already includes some basic configuration. The plugins are easy to remove if you don't plan on using them. +1. `tailwind.config.typography.js`: the Tailwind typography configuration for customizing the `prose` class. +2. `tailwind.config.forms.js`: the Tailwind forms configuration for customizing the form classes. +3. `tailwind.config.peak.js`: all Peak's configuration, utilities and components. +4. `tailwind.config.site.js`: your site's configuration. This file would typically include all custom styles and config for the project you're currently working on. + +All configuration files are fully documented. Read the Tailwind docs on [theme configuration](https://tailwindcss.com/docs/theme/) for more information. + +Read up on the [Tailwind Custom Forms](https://tailwindcss-custom-forms.netlify.app) and [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) plugins. They're easy to customize and the configu files already include some basic customization. The plugins are easy to remove if you don't plan on using them. When your app environment is `local`, Peak will add a breakpoint notice to your site so you can tell on which breakpoint you're currently displaying the website. You can turn this off by removing `{{ environment == 'local' ? 'debug' : '' }}` from `resources/views/layout.antlers.html`.