tailwindcss/stubs/defaultConfig.stub.js

955 lines
22 KiB
JavaScript
Raw Permalink Normal View History

/** @type {import('tailwindcss').Config} */
2019-03-14 15:51:21 -05:00
module.exports = {
Remove AOT (#5340) * make `jit` mode the default when no mode is specified * unify JIT and AOT codepaths * ensure `Object.entries` on undefined doesn't break It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value. * drop AOT specific tests These tests are all covered by JIT mode already and were AOT specific. * simplify tests, and add a few Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output. Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging. * add some todo's to make sure we warn in a few cases * make `darkMode: 'media'`, the default This also includes moving dark mode tests to its own dedicated file. * remove PostCSS 7 compat mode * update CLI to be JIT-first * fix integration tests This is not a _real_ fix, but it does solve the broken test for now. * warn when using @responsive or @variants * remove the JIT preview warning * remove AOT-only code paths * remove all `mode: 'jit'` blocks Also remove `variants: {}` since they are not useful in `JIT` mode anymore. * drop unused dependencies * rename `purge` to `content` * remove static CDN builds * mark `--purge` as deprecated in the CLI This will still work, but a warning will be printed and it won't show up in the `--help` output. * cleanup nesting plugin We don't have to duplicate it anymore since there is no PostCSS 7 version anymore. * make sure integration tests run in band * cleanup folder structure * make sure nesting folder is available * simplify resolving of purge/content information
2021-09-01 17:13:59 +02:00
content: [],
presets: [],
Remove AOT (#5340) * make `jit` mode the default when no mode is specified * unify JIT and AOT codepaths * ensure `Object.entries` on undefined doesn't break It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value. * drop AOT specific tests These tests are all covered by JIT mode already and were AOT specific. * simplify tests, and add a few Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output. Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging. * add some todo's to make sure we warn in a few cases * make `darkMode: 'media'`, the default This also includes moving dark mode tests to its own dedicated file. * remove PostCSS 7 compat mode * update CLI to be JIT-first * fix integration tests This is not a _real_ fix, but it does solve the broken test for now. * warn when using @responsive or @variants * remove the JIT preview warning * remove AOT-only code paths * remove all `mode: 'jit'` blocks Also remove `variants: {}` since they are not useful in `JIT` mode anymore. * drop unused dependencies * rename `purge` to `content` * remove static CDN builds * mark `--purge` as deprecated in the CLI This will still work, but a warning will be printed and it won't show up in the `--help` output. * cleanup nesting plugin We don't have to duplicate it anymore since there is no PostCSS 7 version anymore. * make sure integration tests run in band * cleanup folder structure * make sure nesting folder is available * simplify resolving of purge/content information
2021-09-01 17:13:59 +02:00
darkMode: 'media', // or 'class'
2019-03-14 15:51:21 -05:00
theme: {
2019-05-14 10:51:37 -04:00
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
2020-10-18 15:12:54 -04:00
'2xl': '1536px',
2019-05-14 10:51:37 -04:00
},
colors: ({ colors }) => ({
inherit: colors.inherit,
current: colors.current,
transparent: colors.transparent,
black: colors.black,
white: colors.white,
slate: colors.slate,
gray: colors.gray,
zinc: colors.zinc,
neutral: colors.neutral,
stone: colors.stone,
red: colors.red,
orange: colors.orange,
amber: colors.amber,
yellow: colors.yellow,
lime: colors.lime,
green: colors.green,
emerald: colors.emerald,
teal: colors.teal,
cyan: colors.cyan,
sky: colors.sky,
blue: colors.blue,
2020-11-06 14:34:14 +01:00
indigo: colors.indigo,
violet: colors.violet,
purple: colors.purple,
fuchsia: colors.fuchsia,
pink: colors.pink,
rose: colors.rose,
}),
columns: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
'3xs': '16rem',
'2xs': '18rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
},
2019-03-14 15:51:21 -05:00
spacing: {
px: '1px',
0: '0px',
0.5: '0.125rem',
2020-10-17 20:45:54 -04:00
1: '0.25rem',
1.5: '0.375rem',
2020-10-17 20:45:54 -04:00
2: '0.5rem',
2.5: '0.625rem',
2020-10-17 20:45:54 -04:00
3: '0.75rem',
3.5: '0.875rem',
2020-10-17 20:45:54 -04:00
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
2020-10-17 20:45:54 -04:00
8: '2rem',
9: '2.25rem',
2020-10-17 20:45:54 -04:00
10: '2.5rem',
2020-11-06 14:57:41 +01:00
11: '2.75rem',
2020-10-17 20:45:54 -04:00
12: '3rem',
14: '3.5rem',
2020-10-17 20:45:54 -04:00
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
2020-10-17 20:45:54 -04:00
32: '8rem',
36: '9rem',
2020-10-17 20:45:54 -04:00
40: '10rem',
44: '11rem',
2020-10-17 20:45:54 -04:00
48: '12rem',
52: '13rem',
2020-10-17 20:45:54 -04:00
56: '14rem',
60: '15rem',
2020-10-17 20:45:54 -04:00
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
2020-10-17 20:45:54 -04:00
},
2020-11-06 14:30:16 +01:00
animation: {
none: 'none',
spin: 'spin 1s linear infinite',
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'bounce 1s infinite',
},
aspectRatio: {
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
auto: 'auto',
square: '1 / 1',
video: '16 / 9',
},
backdropBlur: ({ theme }) => theme('blur'),
backdropBrightness: ({ theme }) => theme('brightness'),
backdropContrast: ({ theme }) => theme('contrast'),
backdropGrayscale: ({ theme }) => theme('grayscale'),
backdropHueRotate: ({ theme }) => theme('hueRotate'),
backdropInvert: ({ theme }) => theme('invert'),
backdropOpacity: ({ theme }) => theme('opacity'),
backdropSaturate: ({ theme }) => theme('saturate'),
backdropSepia: ({ theme }) => theme('sepia'),
backgroundColor: ({ theme }) => theme('colors'),
backgroundImage: {
2020-08-19 13:27:34 -04:00
none: 'none',
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
},
backgroundOpacity: ({ theme }) => theme('opacity'),
backgroundPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
2020-11-06 09:40:03 -05:00
backgroundSize: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
},
blur: {
0: '0',
none: '0',
sm: '4px',
DEFAULT: '8px',
md: '12px',
lg: '16px',
xl: '24px',
'2xl': '40px',
'3xl': '64px',
},
brightness: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
200: '2',
},
borderColor: ({ theme }) => ({
2020-11-06 09:40:03 -05:00
...theme('colors'),
DEFAULT: theme('colors.gray.200', 'currentColor'),
}),
borderOpacity: ({ theme }) => theme('opacity'),
borderRadius: {
none: '0px',
sm: '0.125rem',
DEFAULT: '0.25rem',
2019-12-26 15:43:47 -05:00
md: '0.375rem',
lg: '0.5rem',
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
full: '9999px',
},
borderSpacing: ({ theme }) => ({
...theme('spacing'),
}),
2020-11-06 09:40:03 -05:00
borderWidth: {
DEFAULT: '1px',
0: '0px',
2020-11-06 09:40:03 -05:00
2: '2px',
4: '4px',
8: '8px',
},
boxShadow: {
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
none: 'none',
},
boxShadowColor: ({ theme }) => theme('colors'),
caretColor: ({ theme }) => theme('colors'),
accentColor: ({ theme }) => ({
...theme('colors'),
auto: 'auto',
}),
contrast: {
0: '0',
50: '.5',
75: '.75',
100: '1',
125: '1.25',
150: '1.5',
200: '2',
},
container: {},
content: {
none: 'none',
},
cursor: {
auto: 'auto',
default: 'default',
pointer: 'pointer',
wait: 'wait',
text: 'text',
move: 'move',
2021-01-29 15:01:05 -05:00
help: 'help',
'not-allowed': 'not-allowed',
none: 'none',
'context-menu': 'context-menu',
progress: 'progress',
cell: 'cell',
crosshair: 'crosshair',
'vertical-text': 'vertical-text',
alias: 'alias',
copy: 'copy',
'no-drop': 'no-drop',
grab: 'grab',
grabbing: 'grabbing',
'all-scroll': 'all-scroll',
'col-resize': 'col-resize',
'row-resize': 'row-resize',
'n-resize': 'n-resize',
'e-resize': 'e-resize',
's-resize': 's-resize',
'w-resize': 'w-resize',
'ne-resize': 'ne-resize',
'nw-resize': 'nw-resize',
'se-resize': 'se-resize',
'sw-resize': 'sw-resize',
'ew-resize': 'ew-resize',
'ns-resize': 'ns-resize',
'nesw-resize': 'nesw-resize',
'nwse-resize': 'nwse-resize',
'zoom-in': 'zoom-in',
'zoom-out': 'zoom-out',
},
divideColor: ({ theme }) => theme('borderColor'),
divideOpacity: ({ theme }) => theme('borderOpacity'),
divideWidth: ({ theme }) => theme('borderWidth'),
dropShadow: {
sm: '0 1px 1px rgb(0 0 0 / 0.05)',
DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
'2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
none: '0 0 #0000',
},
fill: ({ theme }) => theme('colors'),
grayscale: {
0: '0',
DEFAULT: '100%',
},
hueRotate: {
0: '0deg',
15: '15deg',
30: '30deg',
60: '60deg',
90: '90deg',
180: '180deg',
},
invert: {
0: '0',
DEFAULT: '100%',
},
2020-11-06 09:40:03 -05:00
flex: {
1: '1 1 0%',
auto: '1 1 auto',
initial: '0 1 auto',
none: 'none',
},
2021-10-04 15:47:14 -04:00
flexBasis: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
}),
2020-11-06 09:40:03 -05:00
flexGrow: {
0: '0',
DEFAULT: '1',
},
flexShrink: {
0: '0',
DEFAULT: '1',
},
2019-03-14 15:51:21 -05:00
fontFamily: {
sans: [
'ui-sans-serif',
'system-ui',
2019-03-14 15:51:21 -05:00
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
2019-03-14 15:51:21 -05:00
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
2019-03-14 15:51:21 -05:00
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
2019-03-14 15:51:21 -05:00
],
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
2020-10-17 20:45:54 -04:00
mono: [
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
2019-03-14 15:51:21 -05:00
},
fontSize: {
xs: ['0.75rem', { lineHeight: '1rem' }],
sm: ['0.875rem', { lineHeight: '1.25rem' }],
base: ['1rem', { lineHeight: '1.5rem' }],
lg: ['1.125rem', { lineHeight: '1.75rem' }],
xl: ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
2020-10-18 15:03:06 -04:00
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
2019-03-14 15:51:21 -05:00
},
fontWeight: {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
2019-03-14 15:51:21 -05:00
},
gap: ({ theme }) => theme('spacing'),
gradientColorStops: ({ theme }) => theme('colors'),
2020-11-06 09:40:03 -05:00
gridAutoColumns: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
},
gridAutoRows: {
auto: 'auto',
min: 'min-content',
max: 'max-content',
fr: 'minmax(0, 1fr)',
},
2020-11-06 14:30:16 +01:00
gridColumn: {
auto: 'auto',
2020-11-06 14:30:16 +01:00
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
'span-full': '1 / -1',
},
gridColumnEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
},
gridColumnStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
},
gridRow: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-full': '1 / -1',
},
2020-11-06 09:40:03 -05:00
gridRowStart: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
},
gridRowEnd: {
auto: 'auto',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
},
2020-11-06 14:30:16 +01:00
gridTemplateColumns: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
7: 'repeat(7, minmax(0, 1fr))',
8: 'repeat(8, minmax(0, 1fr))',
9: 'repeat(9, minmax(0, 1fr))',
10: 'repeat(10, minmax(0, 1fr))',
11: 'repeat(11, minmax(0, 1fr))',
12: 'repeat(12, minmax(0, 1fr))',
},
gridTemplateRows: {
none: 'none',
1: 'repeat(1, minmax(0, 1fr))',
2: 'repeat(2, minmax(0, 1fr))',
3: 'repeat(3, minmax(0, 1fr))',
4: 'repeat(4, minmax(0, 1fr))',
5: 'repeat(5, minmax(0, 1fr))',
6: 'repeat(6, minmax(0, 1fr))',
},
height: ({ theme }) => ({
2020-11-06 14:57:58 +01:00
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
2020-11-06 14:57:58 +01:00
}),
inset: ({ theme }) => ({
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
}),
2020-11-06 14:30:16 +01:00
keyframes: {
2020-11-06 09:40:03 -05:00
spin: {
to: {
transform: 'rotate(360deg)',
},
},
ping: {
'75%, 100%': {
transform: 'scale(2)',
opacity: '0',
},
},
pulse: {
'50%': {
opacity: '.5',
},
},
2020-11-06 14:30:16 +01:00
bounce: {
2020-11-06 09:40:03 -05:00
'0%, 100%': {
transform: 'translateY(-25%)',
animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
},
'50%': {
transform: 'none',
animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
},
2020-11-06 14:30:16 +01:00
},
},
2019-03-14 15:51:21 -05:00
letterSpacing: {
2019-04-23 03:49:07 -05:00
tighter: '-0.05em',
tight: '-0.025em',
normal: '0em',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
2019-03-14 15:51:21 -05:00
},
lineHeight: {
none: '1',
tight: '1.25',
snug: '1.375',
normal: '1.5',
relaxed: '1.625',
loose: '2',
2020-10-17 20:45:54 -04:00
3: '.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
2019-03-14 15:51:21 -05:00
},
2020-11-06 09:40:03 -05:00
listStyleType: {
none: 'none',
disc: 'disc',
decimal: 'decimal',
},
margin: ({ theme }) => ({
2020-11-06 09:40:03 -05:00
auto: 'auto',
...theme('spacing'),
}),
maxHeight: ({ theme }) => ({
2020-11-06 09:40:03 -05:00
...theme('spacing'),
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
2020-11-06 09:40:03 -05:00
}),
maxWidth: ({ theme, breakpoints }) => ({
2020-01-09 04:45:27 +01:00
none: 'none',
0: '0rem',
2020-01-09 04:45:27 +01:00
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
2020-01-09 04:45:27 +01:00
full: '100%',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
2020-10-22 09:54:43 -04:00
prose: '65ch',
2020-01-09 04:45:27 +01:00
...breakpoints(theme('screens')),
}),
2020-11-06 09:40:03 -05:00
minHeight: {
0: '0px',
2020-11-06 09:40:03 -05:00
full: '100%',
screen: '100vh',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
2020-11-06 09:40:03 -05:00
},
minWidth: {
0: '0px',
2020-11-06 09:40:03 -05:00
full: '100%',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
2020-11-06 09:40:03 -05:00
},
2019-03-14 15:51:21 -05:00
objectPosition: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
opacity: {
2020-10-17 20:45:54 -04:00
0: '0',
5: '0.05',
10: '0.1',
20: '0.2',
2020-10-17 20:45:54 -04:00
25: '0.25',
30: '0.3',
40: '0.4',
2020-10-17 20:45:54 -04:00
50: '0.5',
60: '0.6',
70: '0.7',
2020-10-17 20:45:54 -04:00
75: '0.75',
80: '0.8',
90: '0.9',
95: '0.95',
2020-10-17 20:45:54 -04:00
100: '1',
2019-03-14 15:51:21 -05:00
},
2019-04-27 11:37:20 -04:00
order: {
first: '-9999',
last: '9999',
2019-04-27 11:37:20 -04:00
none: '0',
2020-10-17 20:45:54 -04:00
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
2019-04-27 11:37:20 -04:00
},
padding: ({ theme }) => theme('spacing'),
placeholderColor: ({ theme }) => theme('colors'),
placeholderOpacity: ({ theme }) => theme('opacity'),
outlineColor: ({ theme }) => theme('colors'),
outlineOffset: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
outlineWidth: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
ringColor: ({ theme }) => ({
DEFAULT: theme(`colors.blue.500`, '#3b82f6'),
...theme('colors'),
}),
ringOffsetColor: ({ theme }) => theme('colors'),
ringOffsetWidth: {
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
ringOpacity: ({ theme }) => ({
DEFAULT: '0.5',
...theme('opacity'),
}),
ringWidth: {
DEFAULT: '3px',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
2019-12-22 15:25:34 -05:00
rotate: {
0: '0deg',
2020-10-17 20:45:54 -04:00
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
45: '45deg',
90: '90deg',
180: '180deg',
2019-12-22 15:25:34 -05:00
},
saturate: {
0: '0',
50: '.5',
100: '1',
150: '1.5',
200: '2',
},
2020-11-06 14:30:16 +01:00
scale: {
0: '0',
50: '.5',
75: '.75',
90: '.9',
95: '.95',
100: '1',
105: '1.05',
110: '1.1',
125: '1.25',
150: '1.5',
},
scrollMargin: ({ theme }) => ({
...theme('spacing'),
}),
scrollPadding: ({ theme }) => theme('spacing'),
sepia: {
0: '0',
DEFAULT: '100%',
},
2020-02-03 11:28:04 -05:00
skew: {
0: '0deg',
2020-10-17 20:45:54 -04:00
1: '1deg',
2: '2deg',
3: '3deg',
6: '6deg',
12: '12deg',
2020-02-03 11:28:04 -05:00
},
space: ({ theme }) => ({
2020-11-06 09:40:03 -05:00
...theme('spacing'),
}),
stroke: ({ theme }) => theme('colors'),
2020-11-06 09:40:03 -05:00
strokeWidth: {
0: '0',
1: '1',
2: '2',
},
textColor: ({ theme }) => theme('colors'),
textDecorationColor: ({ theme }) => theme('colors'),
textDecorationThickness: {
auto: 'auto',
'from-font': 'from-font',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
textUnderlineOffset: {
auto: 'auto',
0: '0px',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
textIndent: ({ theme }) => ({
...theme('spacing'),
}),
textOpacity: ({ theme }) => theme('opacity'),
transformOrigin: {
center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',
},
transitionDelay: {
2020-10-17 20:45:54 -04:00
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
2019-12-24 08:10:49 -05:00
},
transitionDuration: {
DEFAULT: '150ms',
2020-10-17 20:45:54 -04:00
75: '75ms',
100: '100ms',
150: '150ms',
200: '200ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms',
2020-03-19 17:03:12 +01:00
},
2020-11-06 14:30:16 +01:00
transitionProperty: {
none: 'none',
2020-11-06 14:30:16 +01:00
all: 'all',
DEFAULT:
'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
2020-11-06 14:30:16 +01:00
opacity: 'opacity',
shadow: 'box-shadow',
transform: 'transform',
},
2020-11-06 14:30:16 +01:00
transitionTimingFunction: {
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
2020-11-06 14:30:16 +01:00
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
translate: ({ theme }) => ({
2020-11-06 14:30:16 +01:00
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
full: '100%',
}),
width: ({ theme }) => ({
2020-11-06 14:30:16 +01:00
auto: 'auto',
...theme('spacing'),
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
full: '100%',
screen: '100vw',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
2020-11-06 14:30:16 +01:00
}),
willChange: {
Improve arbitrary value support (#5568) * simplify `inset` plugin * run `prettier` on stub file * simplify `align` utility * improve arbitrary support for outline This will allow us to use `outline-[OUTLINE,OPTIONAL_OFFSET]` Input: ```html outline-[2px_solid_black] ``` Output: ```css .outline-\[2px_solid_black\] { outline: 2px solid black; outline-offset: 0; } ``` --- Input: ```html outline-[2px_solid_black,2px] ``` Output: ```css .outline-\[2px_solid_black\2c 2px\] { outline: 2px solid black; outline-offset: 2px; } ``` * remove default `type` * simplify createUtilityPlugin, use types directly * find first matching type when coercing the value * introduce css data types Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types These data types will be used to "guess" the type of an arbitrary value if there is some ambiguity going on. For example: ``` bg-[#0088cc] -> This is a `color` -> `background-color` bg-[url('...')] -> This is a `url` -> `background-image` ``` If you are using css variables, then there is no way of knowing which type it is referring to, in that case you can be explicit: ``` bg-[color:var(--value)] -> This is a `color` -> `background-color` bg-[url:var(--value)] -> This is a `url` -> `background-image` ``` When you explicitly pass a data type, then we bypass the type system and assume you are right. This is nice in a way because now we don't have to run all of the guessing type code. On the other hand, you can introduce runtime issues that we are not able to detect: ``` :root { --value: 12px; } /* Later... */ bg-[color:var(--value)] -> Assumes `color` -> *eventually* -> `background-color: 12px` ``` * add a bunch of new tests for advanced arbitrary values
2021-09-24 18:45:42 +02:00
auto: 'auto',
scroll: 'scroll-position',
contents: 'contents',
transform: 'transform',
},
2020-11-06 09:40:03 -05:00
zIndex: {
auto: 'auto',
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
},
2019-03-14 15:51:21 -05:00
},
variantOrder: [
'first',
'last',
'odd',
'even',
'visited',
'checked',
'empty',
'read-only',
'group-hover',
'group-focus',
'focus-within',
'hover',
'focus',
'focus-visible',
'active',
'disabled',
],
plugins: [],
2019-03-14 15:51:21 -05:00
}