├── dist └── .gitkeep ├── .gitignore ├── .github └── workflows │ ├── ellx-sync-test.yml │ └── ellx-sync.yml ├── package.json ├── lib ├── keyframes.js ├── variants.js ├── selector.js ├── parser.js ├── color.js ├── styles.js ├── sheet.js ├── colors.js ├── utilities.js ├── options.js └── config.js ├── README.md ├── index.ellx ├── index.js └── index.md /dist/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .DS_Store 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.github/workflows/ellx-sync-test.yml: -------------------------------------------------------------------------------- 1 | name: Sync repo with test.ellx.io 2 | 3 | on: 4 | push: 5 | branches: 6 | - test 7 | 8 | jobs: 9 | sync: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v1 13 | - uses: ellxoft/ellx-sync@master 14 | with: 15 | ellx-url: https://test-api.ellx.io 16 | github-token: ${{ secrets.GITHUB_TOKEN }} 17 | -------------------------------------------------------------------------------- /.github/workflows/ellx-sync.yml: -------------------------------------------------------------------------------- 1 | name: Sync repo with Ellx 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - "release/**" 8 | 9 | jobs: 10 | sync: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v1 14 | - uses: ellxoft/ellx-sync@master 15 | with: 16 | ellx-url: https://api.ellx.io 17 | github-token: ${{ secrets.GITHUB_TOKEN }} 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "headlong", 3 | "version": "0.1.6", 4 | "description": "Tailwind CSS on the fly", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "build": "esbuild index.js --bundle --minify --format=esm >> dist/index.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/matyunya/headlong.git" 12 | }, 13 | "module": "index.js", 14 | "main": "dist/index.js", 15 | "author": "Maxim Matyunin", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/matyunya/headlong/issues" 19 | }, 20 | "homepage": "https://github.com/matyunya/headlong#readme", 21 | "dependencies": { 22 | "esbuild": "^0.13.14" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /lib/keyframes.js: -------------------------------------------------------------------------------- 1 | // TODO: respect config values (how to calculate missing bits 2 | // if we only get "to { transform: rotate(360deg) }" how to infer "from { transform: rotate(0deg) }"?) 3 | 4 | export default `@keyframes spin { 5 | from { 6 | transform: rotate(0deg); 7 | } 8 | to { 9 | transform: rotate(360deg); 10 | } 11 | } 12 | 13 | @keyframes ping { 14 | 0% { 15 | transform: scale(1); 16 | opacity: 1; 17 | } 18 | 75%, 100% { 19 | transform: scale(2); 20 | opacity: 0; 21 | } 22 | } 23 | 24 | 25 | @keyframes pulse { 26 | 0%, 100% { 27 | opacity: 1; 28 | } 29 | 50% { 30 | opacity: .5; 31 | } 32 | } 33 | 34 | @keyframes bounce { 35 | 0%, 100% { 36 | transform: translateY(-25%); 37 | animation-timing-function: cubic-bezier(0.8, 0, 1, 1); 38 | } 39 | 50% { 40 | transform: translateY(0); 41 | animation-timing-function: cubic-bezier(0, 0, 0.2, 1); 42 | } 43 | }`; 44 | -------------------------------------------------------------------------------- /lib/variants.js: -------------------------------------------------------------------------------- 1 | // TODO: print and other media 2 | function responsiveRuleString(rule) { 3 | if (typeof rule === 'string') { 4 | return `(min-width: ${rule})`; 5 | } 6 | 7 | if (Array.isArray(rule)) { 8 | return rule.map(responsiveRule).join(','); 9 | } 10 | 11 | const rules = []; 12 | if (rule.max) { 13 | rules.push(`(max-width: ${rule.max})`); 14 | } 15 | if (rules.min) { 16 | rules.push(`(min-width: ${rule.max})`); 17 | } 18 | 19 | return rules.join('and'); 20 | } 21 | 22 | const stylePlaceholder = `{ ##style## }`; 23 | export const responsive = rule => (selector, css) => ` @media ${responsiveRuleString(rule)} { 24 | ${selector} ${css ? `{ ${css} }` : stylePlaceholder} 25 | }`; 26 | 27 | // TODO: append dot to className before passing here 28 | export const dark = (selector) => `.mode-dark ${selector}`; 29 | 30 | export const hover = (selector) => `${selector}:hover`; 31 | 32 | export const focus = (selector) => `${selector}:focus`; 33 | 34 | export const active = (selector) => `${selector}:active`; 35 | 36 | export const checked = (selector) => `${selector}:checked`; 37 | 38 | export const groupHover = (selector) => `.group:hover ${selector}`; 39 | 40 | export const groupFocus = (selector) => `.group:focus ${selector}`; 41 | 42 | export const disabled = (selector) => `${selector}[disabled]`; 43 | -------------------------------------------------------------------------------- /lib/selector.js: -------------------------------------------------------------------------------- 1 | export const list = (prop, options) => new RegExp("^" 2 | + prop 3 | + "-(" 4 | + Object.keys(options).map(o => o.replace('.', '\\.')) 5 | .join('|') 6 | + ")$" 7 | ); 8 | 9 | function defaultGetStyle(list, result, propName) { 10 | if (list[result] === undefined) return; 11 | 12 | return `${propName}: ${list[result]};`; 13 | } 14 | 15 | export const match = (name, regex, getStyle = defaultGetStyle, list, className) => { 16 | if (list && list.DEFAULT && name === className) { 17 | return typeof getStyle === "function" 18 | ? getStyle("DEFAULT", list) 19 | : defaultGetStyle(list, "DEFAULT", getStyle); 20 | } 21 | 22 | const [, result, ...rest] = name.match(regex) || []; 23 | 24 | if (result === undefined) return; 25 | 26 | if (typeof getStyle === "string") return defaultGetStyle(list, result, getStyle); 27 | 28 | return getStyle(result, list, rest); 29 | } 30 | 31 | const configUtils = { 32 | negative(scale) { 33 | return Object.keys(scale) 34 | .filter((key) => scale[key] !== '0') 35 | .reduce( 36 | (negativeScale, key) => ({ 37 | ...negativeScale, 38 | [`-${key}`]: `calc(-${scale[key]})`, // find better way 39 | }), 40 | {} 41 | ) 42 | }, 43 | breakpoints(screens) { 44 | return Object.keys(screens) 45 | .filter((key) => typeof screens[key] === 'string') 46 | .reduce( 47 | (breakpoints, key) => ({ 48 | ...breakpoints, 49 | [`screen-${key}`]: screens[key], 50 | }), 51 | {} 52 | ) 53 | }, 54 | }; 55 | 56 | export const theme = configTheme => k => k.split('.').reduce((acc, cur) => acc[cur], configTheme); 57 | 58 | export function getKey(config, key) { 59 | if (typeof config.theme[key] === 'function') { 60 | return config.theme[key](theme(config.theme)); 61 | } 62 | return config.theme[key]; 63 | } 64 | 65 | export const simpleMatch = configTheme => ([className, cssProp, options, appendix]) => 66 | name => { 67 | if (typeof options === 'function') options = options(theme(configTheme), configUtils); 68 | 69 | const res = match(name, list(className, options), cssProp, options, className); 70 | 71 | if (res === undefined) return; 72 | 73 | if (typeof appendix === 'function') appendix = appendix(name); 74 | 75 | return appendix ? res + appendix : res; 76 | } 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Headlong 2 | 3 | ## Tailwind CSS on the fly without PostCSS 4 | 5 | [README](https://matyunya-headlong.ellx.app/) 6 | 7 | Tailwind CSS produces thousands of classes most of which will never be used. Changes to the Tailwind configuration might take seconds to take effect, and who has seconds to waste these days? There are [articles](https://nystudio107.com/blog/speeding-up-tailwind-css-builds) describing how to speed up Tailwind build times indicating the problem. 8 | 9 | **Headlong** is a runtime version of Tailwind CSS which requires no PostCSS nor purging. Instead of generating all the classes beforehand it adds classes on the fly to the stylesheet whenever they are introduced in the DOM. 10 | 11 | This library is not intended to replace the original Tailwind. Yet, there are environments where one cannot use PostCSS or maybe needs to interpolate class names a lot, or play with configuration. 12 | 13 | Natural advantage of this approach is zero extra build time, _all_ classes are available by default, no need to enable responsive or whatever plugin. 14 | 15 | Headlong was built entirely using [Ellx](https://ellx.io). Here's [source code](https://ellx.io/matyunya/headlong/index.md) and [demo](https://matyunya-headlong.ellx.app/). 16 | 17 | ## Installation and usage 18 | 19 | ``` 20 | $ npm install headlong 21 | ``` 22 | 23 | ```js 24 | import headlong from "headlong"; 25 | 26 | const { 27 | unsubscribe, 28 | parse, 29 | config, 30 | 31 | // returns { styles, classes } of styles string and set of classes 32 | output, 33 | apply, 34 | } = headlong( 35 | config, 36 | { 37 | container, // container element 38 | classes // list of classes to ignore 39 | }); 40 | 41 | // ... 42 | 43 | // stop listening to changes when you're done 44 | unsubscribe(); 45 | ``` 46 | 47 | ## Changelog 48 | 49 | 2021/2/20 50 | - Disallow multiple instances of Headlong on the same page 51 | - Add "output" method 52 | - @apply for simple classes 53 | - Combined selectors 54 | - Fix container 55 | - Add :checked variant 56 | 57 | ## Roadmap 58 | 59 | - [x] Ring 60 | - [x] Divide 61 | - [x] Camelcased colors ("light-blue" is lightBlue in the default palette) 62 | - [x] "Extend" config section 63 | - [x] Preflight 64 | - [x] Container 65 | - [x] Min/max breakpoints, object, array notation breakpoints 66 | - [x] `@apply` as a function (apart from combined variants just like in Tailwind 1.x) 67 | - [x] Combined variants like ("sm:dark:hover:") 68 | - [ ] Negated values using css `calc` function relying on PostCSS plugin 69 | - [ ] Keyframes customization 70 | -------------------------------------------------------------------------------- /lib/parser.js: -------------------------------------------------------------------------------- 1 | import options from "./options.js"; 2 | import utilities, { position, display, container } from "./utilities.js"; 3 | import color from "./color.js"; 4 | 5 | import { 6 | dark, 7 | responsive, 8 | hover, 9 | focus, 10 | active, 11 | groupHover, 12 | groupFocus, 13 | disabled, 14 | checked, 15 | } from "./variants.js"; 16 | 17 | const getFns = (config) => [ 18 | position, 19 | display, 20 | container(config), 21 | ...color(config), 22 | ...utilities(config), 23 | ]; 24 | 25 | // TODO: user-defined variants 26 | const getVariants = config => ({ 27 | ...Object.fromEntries( 28 | Object.keys(config.theme.screens).map(i => [i, responsive(config.theme.screens[i])]) 29 | ), 30 | dark, 31 | hover, 32 | focus, 33 | active, 34 | disabled, 35 | checked, 36 | "group-hover": groupHover, 37 | "group-focus": groupFocus, 38 | }); 39 | 40 | function parseVariant(className, css, variants, sanitize) { 41 | const vars = className 42 | .split(':') 43 | .filter(a => variants[a]) 44 | .sort((a, b) => Object.keys(variants).indexOf(b) - Object.keys(variants).indexOf(a)); 45 | 46 | const selector = vars.reduce((acc, cur) => variants[cur](acc), sanitize('.' + className)); // TODO: mind the "." 47 | 48 | if (selector.includes('##style##')) return selector.replace('##style##', css); 49 | 50 | return `${selector} { ${css} }`; 51 | } 52 | 53 | export const hasVariant = s => /([^:]+:)+[^:]+(::)?[^:]+/.test(s); 54 | 55 | // TODO: refactor for more flexible output 56 | export default function getParse(config) { 57 | const fns = getFns(config); 58 | const variants = getVariants(config); 59 | 60 | function escape(s) { 61 | return s.replace(new RegExp(`(${Object.keys(variants).join('|')}):`, 'g'), '$1\\:'); 62 | } 63 | 64 | function sanitize(name) { 65 | name = name.replace('/', '\\/'); 66 | 67 | if (name.includes("placeholder-")) { 68 | name = escape(name) + "::placeholder"; 69 | } else if (name.includes('space-') || /divide-(?!opacity)/.test(name)) { 70 | name = escape(name) + " > * + *"; 71 | } else { 72 | name = escape(name); 73 | } 74 | 75 | return name; 76 | } 77 | 78 | return (className, onlyStyles = false) => { 79 | const classNameNoVariant = className.split(":").pop(); 80 | let css = options[classNameNoVariant] || fns.reduce((acc, cur) => acc || cur(classNameNoVariant), ""); 81 | 82 | if (!css) return ''; 83 | 84 | if (!css.wrap && !css.endsWith(";")) css += ";"; 85 | 86 | if (hasVariant(className)) { 87 | return parseVariant(className, css, variants, sanitize); 88 | } 89 | 90 | if (css.wrap) return css.wrap(sanitize(className)); 91 | 92 | if (onlyStyles) return css; 93 | 94 | return `.${sanitize(className)} { ${css} }`; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /lib/color.js: -------------------------------------------------------------------------------- 1 | import { getKey } from "./selector.js"; 2 | 3 | const singles = ["current", "transparent", "white", "black"]; 4 | 5 | const toRgb = hex => [ 6 | parseInt(hex.slice(1, 3), 16), 7 | parseInt(hex.slice(3, 5), 16), 8 | parseInt(hex.slice(5, 7), 16) 9 | ].join(','); 10 | 11 | const props = [ 12 | ["placeholder", "placeholderColor", color => `--tw-placeholder-opacity: 1; color: rgba(${color}, var(--tw-placeholder-opacity));`], 13 | ["text", "textColor", color => `--tw-text-opacity: 1; color: rgba(${color}, var(--tw-text-opacity));`], 14 | ["bg", "backgroundColor", color => `--tw-bg-opacity: 1; background-color: rgba(${color}, var(--tw-bg-opacity));`], 15 | ["border", "borderColor", color => `--tw-border-opacity: 1; border-color: rgba(${color}, var(--tw-border-opacity));`], 16 | ["divide", "divideColor", color => `--tw-divide-opacity: 1; border-color: rgba(${color}, var(--tw-divide-opacity));`], 17 | ["ring", "ringColor", color => `--tw-ring-opacity: 1; --tw-ring-color: rgba(${color}, var(--tw-ring-opacity));`], 18 | ["ring-offset", "ringOffsetColor", (_, hex) => `--tw-ring-offset-color: ${hex}; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);`], 19 | ["from", "gradientColorStops", (color, hex) => `--tw-gradient-from: ${hex}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(${color}, 0));`], 20 | ["via", "gradientColorStops", (color, hex) => `--tw-gradient-stops: var(--tw-gradient-from), ${hex}, var(--tw-gradient-to, rgba(${color}, 0));`], 21 | ["to", "gradientColorStops", (_, hex) => `--tw-gradient-to: ${hex};`], 22 | ]; 23 | 24 | const camelize = s => s.replace(/-./g, x=>x.toUpperCase()[1]) 25 | 26 | const kebabize = s => s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase(); 27 | 28 | const mainCssProps = { 29 | placeholder: "color", 30 | text: "color", 31 | bg: "background-color", 32 | border: "border-color", 33 | divide: "border-color", 34 | ring: "--tw-ring-color", 35 | "ring-offset": i => `--tw-ring-offset-color: ${i}; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow);` 36 | }; 37 | 38 | export default config => { 39 | const regexes = props.reduce((acc, [alias, key]) => ({ 40 | ...acc, 41 | [alias]: new RegExp("^" + alias + "-(" + Object.keys(getKey(config, key)).map(kebabize).join('|') + ")-(\\d00?)$"), 42 | }), {}); 43 | 44 | return props.map(([alias, key, getStyle]) => name => { 45 | const single = singles.find(s => `${alias}-${s}` === name); 46 | const palette = getKey(config, key); 47 | 48 | if (single) { 49 | return typeof mainCssProps[alias] === "string" 50 | ? `${mainCssProps[alias]}: ${palette[single]}` 51 | : mainCssProps[alias](palette[single]); 52 | } 53 | 54 | let [, color, variant] = name.match(regexes[alias]) || []; 55 | 56 | color = color && color.includes('-') ? camelize(color) : color; 57 | 58 | if (!color || !palette[color]) return; 59 | 60 | return getStyle(toRgb(palette[color][variant]), palette[color][variant]); 61 | }); 62 | } 63 | -------------------------------------------------------------------------------- /lib/styles.js: -------------------------------------------------------------------------------- 1 | import { getKey } from "./selector.js"; 2 | 3 | export const preflight = ` 4 | /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto} 5 | `; 6 | 7 | export const variables = (config) => { 8 | const ringOffsetColor = getKey(config, "ringOffsetColor").DEFAULT; 9 | const ringColor = getKey(config, "ringColor").DEFAULT; 10 | 11 | return ` 12 | * { 13 | --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); 14 | --tw-ring-offset-width: 0px; 15 | --tw-ring-offset-color: ${ringOffsetColor || '#fff'}; 16 | --tw-ring-color: ${ringColor}; 17 | --tw-ring-offset-shadow: 0 0 #0000; 18 | --tw-ring-shadow: 0 0 #0000; 19 | --tw-shadow: 0 0 #0000; 20 | } 21 | `; 22 | } 23 | -------------------------------------------------------------------------------- /index.ellx: -------------------------------------------------------------------------------- 1 | version: 1.1 2 | nodes: 3 | toggle = () => document.getElementById('test').classList.toggle(className) 4 | button = require("/lib/sheet.js").button 5 | input = require("/lib/sheet.js").input 6 | customConfig = require("/lib/sheet.js").customConfig 7 | $1 = headlong.parse("text-red-500") 8 | $2 = headlong.parse("sm:text-red-500") 9 | $3 = headlong.parse("dark:text-red-500") 10 | $4 = headlong.parse("text-light-blue-500") 11 | $5 = headlong.parse("p-4") 12 | $6 = headlong.parse("m-4") 13 | $7 = headlong.parse("hover:not-italic") 14 | $8 = headlong.parse("animation-pulse") 15 | $13 = headlong.parse("outline-none") 16 | $12 = headlong.parse("container") 17 | $16 = headlong.parse("dark:sm:bg-red-500") 18 | $18 = headlong.parse("sm:dark:bg-red-500") 19 | $15 = headlong.apply(".button", "w-full p-2 dark:sm:bg-red-500 bg-white tracking-wide font-mono dark:from-gray-900 dark:via-gray-800 to-warm-gray-100 dark:to-warm-gray-800 hover:ring-1 ring-0 ring-blue-500 transition duration-150 shadow-sm rounded-sm") 20 | $14 = headlong.output() 21 | $17 = headlong.apply(".test-multiple-variants", "dark:sm:bg-red-500 dark:bg-green-500") 22 | layout: 23 | [ 24 | [, 25 | { 26 | "value": "Toggle:" 27 | } 28 | ], 29 | [, 30 | { 31 | "node": "toggle" 32 | } 33 | ],, 34 | [, 35 | { 36 | "value": "Button:" 37 | } 38 | ], 39 | [, 40 | { 41 | "node": "button" 42 | } 43 | ],, 44 | [, 45 | { 46 | "value": "Input:" 47 | } 48 | ], 49 | [, 50 | { 51 | "node": "input" 52 | } 53 | ],, 54 | [, 55 | { 56 | "value": "Custom config:" 57 | } 58 | ], 59 | [, 60 | { 61 | "node": "customConfig" 62 | } 63 | ],,,,, 64 | [, 65 | { 66 | "value": "T E S T S" 67 | } 68 | ], 69 | [, 70 | { 71 | "value": "Keeping it simple for now, everything must not throw" 72 | } 73 | ],, 74 | [, 75 | { 76 | "node": "$1" 77 | } 78 | ], 79 | [, 80 | { 81 | "node": "$2" 82 | } 83 | ], 84 | [, 85 | { 86 | "node": "$3" 87 | } 88 | ], 89 | [, 90 | { 91 | "node": "$4" 92 | } 93 | ], 94 | [, 95 | { 96 | "node": "$5" 97 | } 98 | ], 99 | [, 100 | { 101 | "node": "$6" 102 | } 103 | ], 104 | [, 105 | { 106 | "node": "$7" 107 | } 108 | ], 109 | [, 110 | { 111 | "node": "$8" 112 | } 113 | ], 114 | [, 115 | { 116 | "node": "$13" 117 | } 118 | ], 119 | [, 120 | { 121 | "node": "$12" 122 | } 123 | ],,, 124 | [, 125 | { 126 | "value": "This is a big one, allows to combine multiple variants: \"dark:sm:text-red-500\" or \"sm:dark:text-red-500\" should be equal" 127 | } 128 | ], 129 | [, 130 | { 131 | "node": "$16" 132 | } 133 | ], 134 | [, 135 | { 136 | "node": "$18" 137 | } 138 | ],, 139 | [, 140 | { 141 | "value": "Output:" 142 | },,,, 143 | { 144 | "value": "Apply:" 145 | } 146 | ], 147 | [,,,,, 148 | { 149 | "node": "$15" 150 | } 151 | ], 152 | [, 153 | { 154 | "node": "$14", 155 | "expansion": { 156 | "vertical": false, 157 | "labelsTop": true, 158 | "secondary": true, 159 | "height": 70, 160 | "width": 2 161 | } 162 | } 163 | ], 164 | [,,,,, 165 | { 166 | "node": "$17" 167 | } 168 | ] 169 | ] 170 | -------------------------------------------------------------------------------- /lib/sheet.js: -------------------------------------------------------------------------------- 1 | import tinycolor from 'tinycolor2'; 2 | 3 | export { default as input } from "~ellx-hub/lib/components/Input/index.js"; 4 | export { default as button } from "~ellx-hub/lib/components/Button/index.js"; 5 | 6 | function multiply(rgb1, rgb2) { 7 | rgb1.b = Math.floor((rgb1.b * rgb2.b) / 255); 8 | rgb1.g = Math.floor((rgb1.g * rgb2.g) / 255); 9 | rgb1.r = Math.floor((rgb1.r * rgb2.r) / 255); 10 | return tinycolor('rgb ' + rgb1.r + ' ' + rgb1.g + ' ' + rgb1.b); 11 | } 12 | 13 | const o = (value, name) => ({ 14 | [name]: tinycolor(value).toHexString() 15 | }); 16 | 17 | const white = tinycolor('#fff'); 18 | 19 | function generatePalette(hex) { 20 | const baseDark = multiply(tinycolor(hex).toRgb(), tinycolor(hex).toRgb()); 21 | const baseTriad = tinycolor(hex).tetrad(); 22 | 23 | const lightest = o(tinycolor.mix(white, hex, 30), '50'); 24 | return { 25 | transLight: tinycolor(lightest[50]) 26 | .toRgbString() 27 | .replace(')', ', 0.2)'), 28 | trans: tinycolor(lightest[50]) 29 | .toRgbString() 30 | .replace(')', ', 0.7)'), 31 | transDark: tinycolor(hex) 32 | .toRgbString() 33 | .replace(')', ', 0.15)'), 34 | ...o(tinycolor.mix(white, hex, 12), '50'), 35 | ...lightest, 36 | ...o(tinycolor.mix(white, hex, 50), '200'), 37 | ...o(tinycolor.mix(white, hex, 70), '300'), 38 | ...o(tinycolor.mix(white, hex, 85), '400'), 39 | ...o(tinycolor.mix(white, hex, 100), '500'), 40 | ...o(tinycolor.mix(baseDark, hex, 87), '600'), 41 | ...o(tinycolor.mix(baseDark, hex, 70), '700'), 42 | ...o(tinycolor.mix(baseDark, hex, 54), '800'), 43 | ...o(tinycolor.mix(baseDark, hex, 25), '900'), 44 | ...o( 45 | tinycolor 46 | .mix(baseDark, baseTriad[4], 15) 47 | .saturate(80) 48 | .lighten(65), 49 | 'a100' 50 | ), 51 | ...o( 52 | tinycolor 53 | .mix(baseDark, baseTriad[4], 15) 54 | .saturate(80) 55 | .lighten(55), 56 | 'a200' 57 | ), 58 | ...o( 59 | tinycolor 60 | .mix(baseDark, baseTriad[4], 15) 61 | .saturate(100) 62 | .lighten(45), 63 | 'a400' 64 | ), 65 | ...o( 66 | tinycolor 67 | .mix(baseDark, baseTriad[4], 15) 68 | .saturate(100) 69 | .lighten(40), 70 | 'a700' 71 | ) 72 | }; 73 | } 74 | 75 | function buildPalette(colors) { 76 | return Object.keys(colors).reduce( 77 | (acc, cur) => ({ 78 | ...acc, 79 | [cur]: generatePalette(colors[cur]) 80 | }), 81 | {} 82 | ); 83 | } 84 | 85 | const colors = { 86 | primary: '#237EB3', 87 | secondary: '#008080', 88 | error: '#f44336', 89 | alert: '#ff9800', 90 | blue: '#2196f3', 91 | dark: '#212121', 92 | }; 93 | 94 | export const customConfig = { 95 | theme: { 96 | extend: { 97 | rotate: { 98 | 360: '360deg', 99 | '-360': '-360deg', 100 | }, 101 | spacing: { 102 | 72: '18rem', 103 | 84: '21rem', 104 | 96: '24rem', 105 | 128: '32rem', 106 | }, 107 | height: { 108 | 96: '20rem', 109 | }, 110 | }, 111 | fontSize: { 112 | '5xl': '6rem', 113 | '4xl': '3.75rem', 114 | '3xl': '3rem', 115 | '2xl': '2.125rem', 116 | xl: '1.5rem', 117 | lg: '1.25rem', 118 | base: '1rem', 119 | sm: '0.875rem', 120 | xs: '0.75rem' 121 | }, 122 | screens: { 123 | sm: { max: '639px' }, 124 | md: '641px', 125 | }, 126 | colors: { 127 | transparent: 'transparent', 128 | 129 | black: '#000', 130 | white: '#fff', 131 | 'white-trans': 'rgba(255,255,255,0.35)', 132 | 'white-transLight': 'rgba(255,255,255,0.2)', 133 | 'white-transDark': 'rgba(255,255,255,0.7)', 134 | 'black-trans': 'rgba(0,0,0,0.35)', 135 | 'black-transLight': 'rgba(0,0,0,0.2)', 136 | 'black-transDark': 'rgba(0,0,0,0.7)', 137 | 138 | gray: { 139 | 50: '#fafafa', 140 | 100: '#f5f5f5', 141 | 200: '#eeeeee', 142 | 300: '#e0e0e0', 143 | 400: '#bdbdbd', 144 | 500: '#9e9e9e', 145 | 600: '#757575', 146 | 700: '#616161', 147 | 800: '#424242', 148 | 900: '#212121', 149 | trans: 'rgba(250, 250, 250, 0.5)', 150 | transLight: 'rgba(250, 250, 250, 0.1)', 151 | transDark: 'rgba(100, 100, 100, 0.2)' 152 | }, 153 | 154 | ...buildPalette(colors) 155 | } 156 | }, 157 | }; 158 | -------------------------------------------------------------------------------- /lib/colors.js: -------------------------------------------------------------------------------- 1 | export default { 2 | transparent: 'transparent', 3 | current: 'currentColor', 4 | black: '#000', 5 | white: '#fff', 6 | rose: { 7 | 50: '#fff1f2', 8 | 100: '#ffe4e6', 9 | 200: '#fecdd3', 10 | 300: '#fda4af', 11 | 400: '#fb7185', 12 | 500: '#f43f5e', 13 | 600: '#e11d48', 14 | 700: '#be123c', 15 | 800: '#9f1239', 16 | 900: '#881337', 17 | }, 18 | pink: { 19 | 50: '#fdf2f8', 20 | 100: '#fce7f3', 21 | 200: '#fbcfe8', 22 | 300: '#f9a8d4', 23 | 400: '#f472b6', 24 | 500: '#ec4899', 25 | 600: '#db2777', 26 | 700: '#be185d', 27 | 800: '#9d174d', 28 | 900: '#831843', 29 | }, 30 | fuchsia: { 31 | 50: '#fdf4ff', 32 | 100: '#fae8ff', 33 | 200: '#f5d0fe', 34 | 300: '#f0abfc', 35 | 400: '#e879f9', 36 | 500: '#d946ef', 37 | 600: '#c026d3', 38 | 700: '#a21caf', 39 | 800: '#86198f', 40 | 900: '#701a75', 41 | }, 42 | purple: { 43 | 50: '#faf5ff', 44 | 100: '#f3e8ff', 45 | 200: '#e9d5ff', 46 | 300: '#d8b4fe', 47 | 400: '#c084fc', 48 | 500: '#a855f7', 49 | 600: '#9333ea', 50 | 700: '#7e22ce', 51 | 800: '#6b21a8', 52 | 900: '#581c87', 53 | }, 54 | violet: { 55 | 50: '#f5f3ff', 56 | 100: '#ede9fe', 57 | 200: '#ddd6fe', 58 | 300: '#c4b5fd', 59 | 400: '#a78bfa', 60 | 500: '#8b5cf6', 61 | 600: '#7c3aed', 62 | 700: '#6d28d9', 63 | 800: '#5b21b6', 64 | 900: '#4c1d95', 65 | }, 66 | indigo: { 67 | 50: '#eef2ff', 68 | 100: '#e0e7ff', 69 | 200: '#c7d2fe', 70 | 300: '#a5b4fc', 71 | 400: '#818cf8', 72 | 500: '#6366f1', 73 | 600: '#4f46e5', 74 | 700: '#4338ca', 75 | 800: '#3730a3', 76 | 900: '#312e81', 77 | }, 78 | blue: { 79 | 50: '#eff6ff', 80 | 100: '#dbeafe', 81 | 200: '#bfdbfe', 82 | 300: '#93c5fd', 83 | 400: '#60a5fa', 84 | 500: '#3b82f6', 85 | 600: '#2563eb', 86 | 700: '#1d4ed8', 87 | 800: '#1e40af', 88 | 900: '#1e3a8a', 89 | }, 90 | lightBlue: { 91 | 50: '#f0f9ff', 92 | 100: '#e0f2fe', 93 | 200: '#bae6fd', 94 | 300: '#7dd3fc', 95 | 400: '#38bdf8', 96 | 500: '#0ea5e9', 97 | 600: '#0284c7', 98 | 700: '#0369a1', 99 | 800: '#075985', 100 | 900: '#0c4a6e', 101 | }, 102 | cyan: { 103 | 50: '#ecfeff', 104 | 100: '#cffafe', 105 | 200: '#a5f3fc', 106 | 300: '#67e8f9', 107 | 400: '#22d3ee', 108 | 500: '#06b6d4', 109 | 600: '#0891b2', 110 | 700: '#0e7490', 111 | 800: '#155e75', 112 | 900: '#164e63', 113 | }, 114 | teal: { 115 | 50: '#f0fdfa', 116 | 100: '#ccfbf1', 117 | 200: '#99f6e4', 118 | 300: '#5eead4', 119 | 400: '#2dd4bf', 120 | 500: '#14b8a6', 121 | 600: '#0d9488', 122 | 700: '#0f766e', 123 | 800: '#115e59', 124 | 900: '#134e4a', 125 | }, 126 | emerald: { 127 | 50: '#ecfdf5', 128 | 100: '#d1fae5', 129 | 200: '#a7f3d0', 130 | 300: '#6ee7b7', 131 | 400: '#34d399', 132 | 500: '#10b981', 133 | 600: '#059669', 134 | 700: '#047857', 135 | 800: '#065f46', 136 | 900: '#064e3b', 137 | }, 138 | green: { 139 | 50: '#f0fdf4', 140 | 100: '#dcfce7', 141 | 200: '#bbf7d0', 142 | 300: '#86efac', 143 | 400: '#4ade80', 144 | 500: '#22c55e', 145 | 600: '#16a34a', 146 | 700: '#15803d', 147 | 800: '#166534', 148 | 900: '#14532d', 149 | }, 150 | lime: { 151 | 50: '#f7fee7', 152 | 100: '#ecfccb', 153 | 200: '#d9f99d', 154 | 300: '#bef264', 155 | 400: '#a3e635', 156 | 500: '#84cc16', 157 | 600: '#65a30d', 158 | 700: '#4d7c0f', 159 | 800: '#3f6212', 160 | 900: '#365314', 161 | }, 162 | yellow: { 163 | 50: '#fefce8', 164 | 100: '#fef9c3', 165 | 200: '#fef08a', 166 | 300: '#fde047', 167 | 400: '#facc15', 168 | 500: '#eab308', 169 | 600: '#ca8a04', 170 | 700: '#a16207', 171 | 800: '#854d0e', 172 | 900: '#713f12', 173 | }, 174 | amber: { 175 | 50: '#fffbeb', 176 | 100: '#fef3c7', 177 | 200: '#fde68a', 178 | 300: '#fcd34d', 179 | 400: '#fbbf24', 180 | 500: '#f59e0b', 181 | 600: '#d97706', 182 | 700: '#b45309', 183 | 800: '#92400e', 184 | 900: '#78350f', 185 | }, 186 | orange: { 187 | 50: '#fff7ed', 188 | 100: '#ffedd5', 189 | 200: '#fed7aa', 190 | 300: '#fdba74', 191 | 400: '#fb923c', 192 | 500: '#f97316', 193 | 600: '#ea580c', 194 | 700: '#c2410c', 195 | 800: '#9a3412', 196 | 900: '#7c2d12', 197 | }, 198 | red: { 199 | 50: '#fef2f2', 200 | 100: '#fee2e2', 201 | 200: '#fecaca', 202 | 300: '#fca5a5', 203 | 400: '#f87171', 204 | 500: '#ef4444', 205 | 600: '#dc2626', 206 | 700: '#b91c1c', 207 | 800: '#991b1b', 208 | 900: '#7f1d1d', 209 | }, 210 | warmGray: { 211 | 50: '#fafaf9', 212 | 100: '#f5f5f4', 213 | 200: '#e7e5e4', 214 | 300: '#d6d3d1', 215 | 400: '#a8a29e', 216 | 500: '#78716c', 217 | 600: '#57534e', 218 | 700: '#44403c', 219 | 800: '#292524', 220 | 900: '#1c1917', 221 | }, 222 | trueGray: { 223 | 50: '#fafafa', 224 | 100: '#f5f5f5', 225 | 200: '#e5e5e5', 226 | 300: '#d4d4d4', 227 | 400: '#a3a3a3', 228 | 500: '#737373', 229 | 600: '#525252', 230 | 700: '#404040', 231 | 800: '#262626', 232 | 900: '#171717', 233 | }, 234 | gray: { 235 | 50: '#fafafa', 236 | 100: '#f4f4f5', 237 | 200: '#e4e4e7', 238 | 300: '#d4d4d8', 239 | 400: '#a1a1aa', 240 | 500: '#71717a', 241 | 600: '#52525b', 242 | 700: '#3f3f46', 243 | 800: '#27272a', 244 | 900: '#18181b', 245 | }, 246 | coolGray: { 247 | 50: '#f9fafb', 248 | 100: '#f3f4f6', 249 | 200: '#e5e7eb', 250 | 300: '#d1d5db', 251 | 400: '#9ca3af', 252 | 500: '#6b7280', 253 | 600: '#4b5563', 254 | 700: '#374151', 255 | 800: '#1f2937', 256 | 900: '#111827', 257 | }, 258 | blueGray: { 259 | 50: '#f8fafc', 260 | 100: '#f1f5f9', 261 | 200: '#e2e8f0', 262 | 300: '#cbd5e1', 263 | 400: '#94a3b8', 264 | 500: '#64748b', 265 | 600: '#475569', 266 | 700: '#334155', 267 | 800: '#1e293b', 268 | 900: '#0f172a', 269 | }, 270 | }; 271 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import getConfig from "./lib/config.js"; 2 | import getParser, { hasVariant } from "./lib/parser.js"; 3 | import keyframes from "./lib/keyframes.js"; 4 | import { preflight as preflightStyles, variables } from "./lib/styles.js"; 5 | import { theme } from "./lib/selector.js"; 6 | 7 | const onObserve = (process, filterClasses, append) => mutations => { 8 | let styles = [...new Set( 9 | mutations 10 | .filter(t => t.type === 'attributes') 11 | .map(i => (i.target.classList.value || "").split(' ')) 12 | .flat() 13 | .filter(a => { 14 | return filterClasses(a) 15 | }) 16 | )] 17 | .map(process) 18 | .filter(Boolean); 19 | 20 | styles = [...styles, ...[...new Set( 21 | mutations 22 | .filter(f => { 23 | return f.type === 'childList' && f.addedNodes.length && f.addedNodes[0].classList 24 | }) 25 | .map(i => { 26 | let c = []; 27 | const node = i.addedNodes[0] 28 | const all = node.getElementsByTagName('*'); 29 | 30 | for (var i = -1, l = all.length; ++i < l;) { 31 | c.push((all[i].classList.value ||'').split(' ')); 32 | } 33 | return [...c.flat(), ...(node.classList.value || '').split(' ')]; 34 | }) 35 | .flat() 36 | ) 37 | ] 38 | .filter(filterClasses) 39 | .map(process) 40 | .filter(Boolean) 41 | ]; 42 | 43 | append(styles); 44 | } 45 | 46 | const getInitialClasses = (process) => [...new Set( 47 | [...document.querySelectorAll("*")] 48 | .map(i => i.classList.value.split(' ')) 49 | .flat() 50 | )] 51 | .map(process) 52 | .filter(Boolean); 53 | 54 | const observeClasses = (observer, container) => observer.observe( 55 | container, 56 | { 57 | subtree: true, 58 | attributes: true, 59 | childList: true, 60 | } 61 | ); 62 | 63 | function mergeUserConfig(config, userConfig) { 64 | if (!userConfig || !userConfig.theme) return config; 65 | 66 | const configTheme = theme(config.theme); 67 | 68 | if (userConfig.theme.extend) { 69 | for (const key in userConfig.theme.extend) { 70 | config.theme[key] = typeof config.theme[key] === 'function' 71 | ? { 72 | ...config.theme[key](configTheme), 73 | ...userConfig.theme.extend[key], 74 | } : { 75 | ...config.theme[key], 76 | ...userConfig.theme.extend[key], 77 | }; 78 | } 79 | } 80 | 81 | return { 82 | ...config, 83 | theme: Object.keys(config.theme).reduce((acc, cur) => ({ 84 | ...acc, 85 | [cur]: userConfig.theme[cur] || config.theme[cur] 86 | }), {}) 87 | }; 88 | } 89 | 90 | function appendCssToEl(css, el) { 91 | if (!css) return; 92 | 93 | if (el.styleSheet) { 94 | el.styleSheet.cssText = css; 95 | } else { 96 | el.appendChild(document.createTextNode(css)); 97 | } 98 | } 99 | 100 | let headlong; 101 | 102 | export function init({ 103 | container = document.querySelector('body'), 104 | classes: userClasses = new Set(), 105 | config: userConfig = {}, 106 | preflight = true, 107 | } = {}) { 108 | if (headlong) return headlong; 109 | 110 | if (!(userClasses instanceof Set)) { 111 | throw new Error('Classes must be instance of Set'); 112 | } 113 | 114 | const classes = new Set(userClasses); 115 | 116 | const s = document.createElement('style'); 117 | s.setAttribute('type', 'text/css'); 118 | document.head.appendChild(s); 119 | 120 | const med = document.createElement('style'); 121 | med.setAttribute('type', 'text/css'); 122 | document.head.appendChild(med); 123 | 124 | function appendStyleMedia(css) { 125 | appendCssToEl(css, med); 126 | } 127 | 128 | function appendStyle(css) { 129 | appendCssToEl(css, s); 130 | } 131 | 132 | function append(styles) { 133 | appendStyle(styles.filter(s => !s.includes('@media')).join('\n')); 134 | appendStyleMedia(styles.filter(s => s.includes('@media')).join('\n')); 135 | } 136 | 137 | const filterClasses = i => Boolean(i) && !classes.has(i) && typeof i === "string"; 138 | 139 | const configMerged = mergeUserConfig(getConfig(), userConfig); 140 | const parse = getParser(configMerged); 141 | 142 | const process = c => { 143 | const css = parse(c); 144 | if (css) { 145 | classes.add(c); 146 | } 147 | return css; 148 | } 149 | 150 | const initialStyles = getInitialClasses(process, filterClasses); 151 | appendStyle( 152 | (preflight ? preflightStyles : "") 153 | + variables(configMerged) 154 | + keyframes 155 | ); 156 | append(initialStyles); 157 | 158 | const classObserver = new MutationObserver(onObserve(process, filterClasses, append)); 159 | observeClasses(classObserver, container); 160 | 161 | function output() { // TODO: what output options do we need? 162 | return { 163 | classes: new Set(classes), 164 | styles: ``.replace(/\n/, '') 165 | }; 166 | } 167 | 168 | headlong = { 169 | unsubscribe: () => { 170 | console.log('Headlong generated styles', output()); 171 | classObserver.disconnect(); 172 | headlong = null; 173 | return output(); 174 | }, 175 | parse, 176 | config: configMerged, 177 | output, 178 | apply: (selector, classList) => { 179 | const arr = classList.split(' '); 180 | const noVariantStyles = arr 181 | .filter(s => !hasVariant(s)) 182 | .map(c => parse(c, true)) 183 | .filter(Boolean) 184 | .join('') || ''; 185 | 186 | appendStyle(`${selector} { ${noVariantStyles} }`); 187 | 188 | // Facing the same problem with @apply variant:class like Tailwind 1.x. 189 | // Got to group all uninque variant groups, capture their styles separately, 190 | // then apply variant groups on selector argument (which can be tricky if we allow arbitrary selector) 191 | // so keeping it simple for now. 192 | 193 | // apply('#mySelector', 'sm:text-red-500 text-green-500 dark:sm:text-yellow-500') 194 | // should resolve to 195 | // #mySelector { --tw-text-opacity: 1; color: rgba(239,68,68, var(--tw-text-opacity)); } 196 | // @media (min-width: 640px) { #mySelector { --tw-text-opacity: 1; color: rgba(239,68,68, var(--tw-text-opacity)); } } 197 | // @media (min-width: 640px) { .mode-dark #mySelector { --tw-text-opacity: 1; color: rgba(245,158,11, var(--tw-text-opacity)); } } 198 | 199 | // const variantStyles = arr.filter(hasVariant).map(c => parse(c).replace(c.split(":").pop(), selector)); 200 | // append(variantStyles); 201 | 202 | return `${selector} { ${noVariantStyles} }`; 203 | } 204 | }; 205 | 206 | return headlong; 207 | } 208 | 209 | export default init; 210 | -------------------------------------------------------------------------------- /lib/utilities.js: -------------------------------------------------------------------------------- 1 | import { simpleMatch } from "./selector.js"; 2 | import keyframes from "./keyframes.js"; 3 | import { responsive } from "./variants.js"; 4 | 5 | export default ({ theme }) => [ 6 | ["text", (i, o) => `font-size: ${o[i][0]}; line-height: ${o[i][1].lineHeight};`, theme.fontSize], 7 | ["ring", (i, o) => `--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(${o[i]} + var(--tw-ring-offset-width)) var(--tw-ring-color);`, theme.ringWidth, `box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);`], 8 | ["w", "width", theme.width], 9 | ["h", "height", theme.height], 10 | ["max-w", "max-width", theme.maxWidth], 11 | ["max-h", "max-height", theme.maxHeight], 12 | ["min-w", "min-width", theme.minWidth], 13 | ["min-h", "min-height", theme.minHeight], 14 | ["opacity", "opacity", theme.opacity], 15 | ["outline", "outline", theme.outline], 16 | ["leading", "line-height", theme.lineHeight], 17 | ["cursor", "cursor", theme.cursor], 18 | ["tracking", "letter-spacing", theme.letterSpacing], 19 | ["font", "font-weight", theme.fontWeight], 20 | ["z", "z-index", theme.zIndex], 21 | ["stroke", "stroke-width", theme.strokeWidth], 22 | ["grid-cols", "grid-template-columns", theme.gridTemplateColumns], 23 | ["grid-rows", "grid-template-rows", theme.gridTemplateRows], 24 | ["col", "grid-column", theme.gridColumn], 25 | ["col-start", "grid-column-start", theme.gridColumnEnd], 26 | ["col-end", "grid-column-end", theme.gridColumnStart], 27 | ["row", "grid-row", theme.gridRow], 28 | ["row-start", "grid-row-start", theme.gridRowEnd], 29 | ["row-end", "grid-row-end", theme.gridRowStart], 30 | ["auto-cols", "grid-auto-cols", theme.gridAutoColumns], 31 | ["auto-rows", "grid-auto-rows", theme.gridAutoRows], 32 | ["gap", "gap", theme.gap], 33 | ["gap-x", "column-gap", theme.gap], 34 | ["gap-y", "row-gap", theme.gap], 35 | ["shadow", "--tw-shadow", theme.boxShadow, "box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);"], 36 | ["list", "list-style-type", theme.listStyleType], 37 | ["placeholder-opacity", "--tw-placeholder-opacity", theme.placeholderOpacity], 38 | ["text-opacity", "--tw-text-opacity", theme.textOpacity], 39 | ["bg-opacity", "--tw-bg-opacity", theme.backgroundOpacity], 40 | ["border-opacity", "--tw-border-opacity", theme.borderOpacity], 41 | ["divide-opacity", "--tw-divide-opacity", theme.divideOpacity], 42 | ["ring-opacity", "--tw-ring-opacity", theme.ringOpacity], 43 | ["rotate", "--tw-rotate", theme.rotate], 44 | ["translate-x", "--tw-translate-x", theme.translate], 45 | ["translate-y", "--tw-translate-y", theme.translate], 46 | ["skew-x", "--tw-skew-x", theme.skew], 47 | ["skew-y", "--tw-skew-y", theme.skew], 48 | ["scale-x", "--tw-scale-x", theme.scale], 49 | ["scale-y", "--tw-scale-y", theme.scale], 50 | ["scale", (i, o) => `--tw-scale-x: ${o[i]}; --tw-scale-y: ${o[i]};`, theme.scale], 51 | ["duration", "transition-duration", theme.transitionDuration], 52 | ["ease", "transition-timing-function", theme.transitionTimingFunction], 53 | ["delay", "transition-delay", theme.transitionDelay], 54 | ["ring-offset", "--tw-ring-offset-width", theme.ringOffsetWidth, "box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-theme.)"], 55 | ["rounded", "border-radius", theme.borderRadius], 56 | ["rounded-t", (i, o) => `border-top-left-radius: ${o[i]}; border-top-right-radius: ${o[i]};`, theme.borderRadius], 57 | ["rounded-r", (i, o) => `border-top-right-radius: ${o[i]}; border-bottom-right-radius: ${o[i]};`, theme.borderRadius], 58 | ["rounded-b", (i, o) => `border-bottom-right-radius: ${o[i]}; border-bottom-left-radius: ${o[i]};`, theme.borderRadius], 59 | ["rounded-l", (i, o) => `border-top-left-radius: ${o[i]}; border-bottom-left-radius: ${o[i]};`, theme.borderRadius], 60 | ["rounded-tl", "border-top-left-radius", theme.borderRadius], 61 | ["rounded-tr", "border-top-right-radius", theme.borderRadius], 62 | ["rounded-br", "border-bottom-right-radius", theme.borderRadius], 63 | ["rounded-bl", "border-top-left-radius", theme.borderRadius], 64 | ["border", "border-width", theme.borderWidth], 65 | ["border-t", "border-top-width", theme.borderWidth], 66 | ["border-b", "border-bottom-width", theme.borderWidth], 67 | ["border-l", "border-left-width", theme.borderWidth], 68 | ["border-r", "border-right-width", theme.borderWidth], 69 | ["m", "margin", theme.margin], 70 | ["ml", "margin-left", theme.margin], 71 | ["mr", "margin-right", theme.margin], 72 | ["mb", "margin-bottom", theme.margin], 73 | ["mt", "margin-top", theme.margin], 74 | ["my", (i, o) => `margin-top: ${o[i]}; margin-bottom: ${o[i]};`, theme.margin], 75 | ["mx", (i, o) => `margin-left: ${o[i]}; margin-right: ${o[i]};`, theme.margin], 76 | ["p", "padding", theme.padding], 77 | ["pl", "padding-left", theme.padding], 78 | ["pr", "padding-right", theme.padding], 79 | ["pb", "padding-bottom", theme.padding], 80 | ["pt", "padding-top", theme.padding], 81 | ["py", (i, o) => `padding-top: ${o[i]}; padding-bottom: ${o[i]};`, theme.padding], 82 | ["px", (i, o) => `padding-left: ${o[i]}; padding-right: ${o[i]};`, theme.padding], 83 | ["space-y", (i, o) => `--tw-space-y-reverse: 0; margin-top: calc(${o[i]} * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(${o[i]} * var(--tw-space-y-reverse));`, theme.space], 84 | ["space-x", (i, o) => `--tw-space-x-reverse: 0; margin-left: calc(${o[i]} * calc(1 - var(--tw-space-x-reverse))); margin-right: calc(${o[i]} * var(--tw-space-x-reverse));`, theme.space], 85 | ["divide-y", (i, o) => `--tw-divide-y-reverse: 0; border-top-width: calc(${o[i]} * calc(1 - var(--tw-divide-y-reverse))); 86 | border-bottom-width: calc(${o[i]} * var(--tw-divide-y-reverse))`, theme.divideWidth], 87 | ["divide-x", (i, o) => `--tw-divide-x-reverse: 0; border-right-width: calc(${o[i]} * var(--tw-divide-x-reverse)); border-left-width: calc(${o[i]} * calc(1 - var(--tw-divide-x-reverse)));`, theme.divideWidth], 88 | ["animation", "animation", theme.animation], 89 | ].map(simpleMatch(theme)); 90 | 91 | export const position = (name) => [ 92 | "static", 93 | "fixed", 94 | "absolute", 95 | "relative", 96 | "sticky", 97 | ].includes(name) ? `position: ${name}` : null; 98 | 99 | export const display = (name) => [ 100 | "block", 101 | "inline-block", 102 | "inline", 103 | "flex", 104 | "inline-flex", 105 | "table", 106 | "table-caption", 107 | "table-cell", 108 | "table-column", 109 | "table-column-group", 110 | "table-footer-group", 111 | "table-header-group", 112 | "table-row-group", 113 | "table-row", 114 | "flow-root", 115 | "grid", 116 | "inline-grid", 117 | "contents", 118 | ].includes(name) ? `display: ${name}` : null; 119 | 120 | 121 | export function container({ theme }) { 122 | const { container, screens } = theme; 123 | 124 | const centered = container.center ? "margin: 0 auto" : ""; 125 | const padded = size => container.padding && container.padding[size] 126 | ? "padding: 0 " + container.padding[size] 127 | : ""; 128 | 129 | const contStyles = `.container { max-width: 100%; ${padded("DEFAULT")} }` 130 | + Object.keys(screens).reduce( 131 | (acc, size) => acc + responsive(screens[size])(".container").replace('##style##', `max-width: ${screens[size]}; ${padded(size)}`), 132 | "", 133 | ); 134 | 135 | console.log({ contStyles }); 136 | 137 | return name => name === 'container' ? { wrap: () => contStyles } : false; 138 | } 139 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | # Headlong 2 | 3 | ## Tailwind CSS on the fly without PostCSS 4 | 5 | Tailwind CSS produces thousands of classes most of which will never be used. Changes to the Tailwind configuration might take seconds to take effect, and who has seconds to waste these days? There are [articles](https://nystudio107.com/blog/speeding-up-tailwind-css-builds) describing how to speed up Tailwind build times indicating the problem. 6 | 7 | **Headlong** is a runtime version of Tailwind CSS which requires no PostCSS nor purging. Instead of generating all the classes beforehand it adds classes on the fly to the stylesheet whenever they are introduced in the DOM. 8 | 9 | This library is not intended to replace the original Tailwind. Yet, there are environments where one cannot use PostCSS or maybe needs to interpolate class names a lot, or play with configuration. 10 | 11 | Natural advantage of this approach is zero extra build time, _all_ classes are available by default, no need to enable responsive or whatever plugin. 12 | 13 | Headlong was built entirely using [Ellx](https://ellx.io). Here's [source code](https://ellx.io/matyunya/headlong/index.md) and [demo](https://matyunya-headlong.ellx.app/). 14 | 15 | ## Demo 16 | 17 | Type any utility class name into the input. Click the button to toggle the class on the test div. 18 | 19 | { className = input({ label: "New class name", value: "text-fuchsia-500", size: 4 })} 20 | 21 |
22 | 23 | { parsed = headlong.parse(className) } 24 | 25 |
26 | 27 | { button({ label: "toggle", onClick: toggle, disabled: !parsed })} 28 | 29 | I am a Headlong test 30 | 31 | 32 | ### Apply 33 | 34 | Headlong exposes `apply` method mirroring Tailwind's `@apply` directive which allows to apply utility classes' styles to arbitrary css selectors. 35 | 36 | { applySelector = input({ label: "Apply selector", value: "#applied", size: 4 })} 37 | 38 | { applyClassName = input({ label: "Classes to apply", value: "text-fuchsia-500 italic", size: 4 })} 39 | 40 |
41 | 42 | { appliedStyles = headlong.apply(applySelector, applyClassName) } 43 | 44 |
45 | 46 | ## Installation and usage 47 | 48 | ``` 49 | $ npm install headlong 50 | ``` 51 | 52 | ``` 53 | import headlong from "headlong"; 54 | 55 | const { 56 | unsubscribe, 57 | parse, 58 | config, 59 | 60 | // returns { styles, classes } of styles string and set of classes 61 | output, 62 | apply, 63 | } = headlong( 64 | config, 65 | { 66 | container, // container element 67 | classes // list of classes to ignore 68 | }); 69 | 70 | // ... 71 | 72 | // stop listening to changes when you're done 73 | unsubscribe(); 74 | ``` 75 | 76 | ## Roadmap 77 | 78 | - [x] Ring 79 | - [x] Divide 80 | - [x] Camelcased colors ("light-blue" is lightBlue in the default palette) 81 | - [x] "Extend" config section 82 | - [x] Preflight 83 | - [x] Container 84 | - [x] Min/max breakpoints, object, array notation breakpoints 85 | - [x] `@apply` as a function (working apart from combined selectors) 86 | - [x] Combined selectors like ("sm:dark:hover:") 87 | - [ ] Negated values using css `calc` function relying on PostCSS plugin 88 | - [ ] Keyframes customization 89 | - [ ] Proper breakpoints 90 | 91 | ## Classes 92 | 93 | Please refer to Tailwind [documentation](https://tailwindcss.com/docs) for all available classes. 94 | 95 | ### Placeholder color and opacity 96 | 97 | [Docs](https://tailwindcss.com/docs/placeholder-color) 98 | 99 | ```html 100 | 105 | ``` 106 | 107 | 108 | 109 | ### Space between 110 | 111 | [Docs](https://tailwindcss.com/docs/space) 112 | 113 | ```html 114 |
115 |
116 | 1 117 |
118 |
119 | 2 120 |
121 |
122 | 3 123 |
124 |
125 | ``` 126 | 127 |
128 |
1
129 |
2
130 |
3
131 |
132 | 133 | ### Divide 134 | 135 | [Docs](https://tailwindcss.com/docs/divide-width) 136 | 137 | ```html 138 |
139 |
140 | 1 141 |
142 |
143 | 2 144 |
145 |
146 | 3 147 |
148 |
149 | ``` 150 | 151 |
152 |
1
153 |
2
154 |
3
155 |
156 | 157 | ### Gradients 158 | 159 | [Docs](https://tailwindcss.com/docs/gradient-color-stops) 160 | 161 | ```html 162 |
165 |
166 |
167 | ``` 168 | 169 |
170 | 171 |
172 | 173 |
174 | 175 | ### Ring 176 | 177 | [Docs](https://tailwindcss.com/docs/ring-width) 178 | 179 | ```html 180 |
183 |
186 | ring 187 |
188 |
191 | ring 192 |
193 |
194 | ``` 195 | 196 |
197 |
198 | ring 199 |
200 |
201 | ring 202 |
203 |
204 | 205 | 213 | 214 | 222 | -------------------------------------------------------------------------------- /lib/options.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "flex-wrap": "flex-wrap: wrap", 3 | "flex-wrap-reverse": "flex-wrap: wrap-reverse", 4 | "flex-nowrap": "flex-wrap: nowrap", 5 | "float-right": "float: right", 6 | "float-left": "float: left", 7 | "float-none": "float: none", 8 | "flex-row": "flex-direction: row", 9 | "flex-row-reverse": "flex-direction: row-reverse", 10 | "flex-col": "flex-direction: column", 11 | "flex-col-reverse": "flex-direction: column-reverse", 12 | "clear-left": "clear: left", 13 | "clear-right": "clear: right", 14 | "clear-both": "clear: both", 15 | "clear-none": "clear: none", 16 | "box-border": "box-sizing: border-box", 17 | "box-content": "box-sizing: content-box", 18 | "object-contain": "object-fit: contain", 19 | "object-cover": "object-fit: cover", 20 | "object-fill": "object-fit: fill", 21 | "object-none": "object-fit: none", 22 | "object-scale-down": "object-fit: scale-down", 23 | "object-bottom": "object-position: bottom", 24 | "object-center": "object-position: center", 25 | "object-left": "object-position: left", 26 | "object-left-bottom": "object-position: left bottom", 27 | "object-left-top": "object-position: left top", 28 | "object-right": "object-position: right", 29 | "object-right-bottom": "object-position: right bottom", 30 | "object-right-top": "object-position: right top", 31 | "object-top": "object-position: top", 32 | "overflow-auto": "overflow: auto", 33 | "overflow-hidden": "overflow: hidden", 34 | "overflow-visible": "overflow: visible", 35 | "overflow-scroll": "overflow: scroll", 36 | "overflow-x-auto": "overflow-x: auto", 37 | "overflow-y-auto": "overflow-y: auto", 38 | "overflow-x-hidden": "overflow-x: hidden", 39 | "overflow-y-hidden": "overflow-y: hidden", 40 | "overflow-x-visible": "overflow-x: visible", 41 | "overflow-y-visible": "overflow-y: visible", 42 | "overflow-x-scroll": "overflow-x: scroll", 43 | "overflow-y-scroll": "overflow-y: scroll", 44 | "overscroll-auto": "overscroll-behavior: auto", 45 | "overscroll-contain": "overscroll-behavior: contain", 46 | "overscroll-none": "overscroll-behavior: none", 47 | "overscroll-y-auto": "overscroll-behavior-y: auto", 48 | "overscroll-y-contain": "overscroll-behavior-y: contain", 49 | "overscroll-y-none": "overscroll-behavior-y: none", 50 | "overscroll-x-auto": "overscroll-behavior-x: auto", 51 | "overscroll-x-contain": "overscroll-behavior-x: contain", 52 | "overscroll-x-none": "overscroll-behavior-x: none", 53 | "visible": "visibility: visible", 54 | "invisible": "visibility: hidden", 55 | "flex-1": "flex: 1 1 0%", 56 | "flex-auto": "flex: 1 1 auto", 57 | "flex-initial": "flex: 0 1 auto", 58 | "flex-none": "flex: none", 59 | "flex-grow-0": "flex-grow: 0", 60 | "flex-grow": "flex-grow: 1", 61 | "flex-shrink-0": "flex-shrink: 0", 62 | "flex-shrink": "flex-shrink: 1", 63 | "order-1": "order: 1", 64 | "order-2": "order: 2", 65 | "order-3": "order: 3", 66 | "order-4": "order: 4", 67 | "order-5": "order: 5", 68 | "order-6": "order: 6", 69 | "order-7": "order: 7", 70 | "order-8": "order: 8", 71 | "order-9": "order: 9", 72 | "order-10": "order: 10", 73 | "order-11": "order: 11", 74 | "order-12": "order: 12", 75 | "order-first": "order: -9999", 76 | "order-last": "order: 9999", 77 | "order-none": "order: 0", 78 | "justify-start": "justify-content: flex-start", 79 | "justify-end": "justify-content: flex-end", 80 | "justify-center": "justify-content: center", 81 | "justify-between": "justify-content: space-between", 82 | "justify-around": "justify-content: space-around", 83 | "justify-evenly": "justify-content: space-evenly", 84 | "justify-items-auto": "justify-items: auto", 85 | "justify-items-start": "justify-items: start", 86 | "justify-items-end": "justify-items: end", 87 | "justify-items-center": "justify-items: center", 88 | "justify-items-stretch": "justify-items: stretch", 89 | "justify-self-auto": "justify-self: auto", 90 | "justify-self-start": "justify-self: start", 91 | "justify-self-end": "justify-self: end", 92 | "justify-self-center": "justify-self: center", 93 | "justify-self-stretch": "justify-self: stretch", 94 | "content-center": "align-content: center", 95 | "content-start": "align-content: flex-start", 96 | "content-end": "align-content: flex-end", 97 | "content-between": "align-content: space-between", 98 | "content-around": "align-content: space-around", 99 | "content-evenly": "align-content: space-evenly", 100 | "items-start": "align-items: flex-start", 101 | "items-end": "align-items: flex-end", 102 | "items-center": "align-items: center", 103 | "items-baseline": "align-items: baseline", 104 | "items-stretch": "align-items: stretch", 105 | "self-auto": "align-self: auto", 106 | "self-start": "align-self: flex-start", 107 | "self-end": "align-self: flex-end", 108 | "self-center": "align-self: center", 109 | "self-stretch": "align-self: stretch", 110 | "min-w-0": "min-width: 0px", 111 | "min-w-full": "min-width: 100%", 112 | "min-w-min": "min-width: min-content", 113 | "min-w-max": "min-width: max-content", 114 | "min-h-0": "min-height: 0px", 115 | "min-h-full": "min-height: 100%", 116 | "min-h-screen": "min-height: 100vh", 117 | "font-sans": 'font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', 118 | "font-serif": 'font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif', 119 | "font-mono": 'font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', 120 | "italic": "font-style: italic", 121 | "not-italic": "font-style: normal", 122 | "text-left": "text-align: left", 123 | "text-center": "text-align: center", 124 | "text-right": "text-align: right", 125 | "text-justify": "text-align: justify", 126 | "underline": "text-decoration: underline", 127 | "line-through": "text-decoration: line-through", 128 | "no-underline": "text-decoration: none", 129 | "uppercase": "text-transform: uppercase", 130 | "lowercase": "text-transform: lowercase", 131 | "capitalize": "text-transform: capitalize", 132 | "normal-case": "text-transform: none", 133 | "truncate": "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;", 134 | "overflow-ellipsis": "text-overflow: ellipsis", 135 | "overflow-clip": "text-overflow: clip", 136 | "align-baseline": "vertical-align: baseline", 137 | "align-top": "vertical-align: top", 138 | "align-middle": "vertical-align: middle", 139 | "align-bottom": "vertical-align: bottom", 140 | "align-text-top": "vertical-align: text-top", 141 | "align-text-bottom": "vertical-align: text-bottom", 142 | "whitespace-normal": "white-space: normal", 143 | "whitespace-nowrap": "white-space: nowrap", 144 | "whitespace-pre": "white-space: pre", 145 | "whitespace-pre-line": "white-space: pre-line", 146 | "whitespace-pre-wrap": "white-space: pre-wrap", 147 | "break-normal": "overflow-wrap: normal; word-break: normal", 148 | "break-words": "overflow-wrap: break-word", 149 | "break-all": "word-break: break-all", 150 | "border-collapse": "border-collapse: collapse", 151 | "border-separate": "border-collapse: separate", 152 | "table-auto": "table-layout: auto", 153 | "table-fixed": "table-layout: fixed", 154 | "appearance-none": "appearance: none", 155 | "select-none": "user-select: none", 156 | "select-text": "user-select: text", 157 | "select-all": "user-select: all", 158 | "select-auto": "user-select: auto", 159 | "resize-none": "resize: none", 160 | "resize-y": "resize: vertical", 161 | "resize-x": "resize: horizontal", 162 | "resize": "resize: both", 163 | "pointer-events-none": "pointer-events: none", 164 | "pointer-events-auto": "pointer-events: auto", 165 | "fill-current": "fill: currentColor", 166 | "stroke-current": "stroke: currentColor", 167 | "sr-only": `position: absolute; 168 | width: 1px; 169 | height: 1px; 170 | padding: 0; 171 | margin: -1px; 172 | overflow: hidden; 173 | clip: rect(0, 0, 0, 0); 174 | white-space: nowrap; 175 | border-width: 0;`, 176 | "not-sr-only": `position: static; 177 | width: auto; 178 | height: auto; 179 | padding: 0; 180 | margin: 0; 181 | overflow: visible; 182 | clip: auto; 183 | white-space: normal;`, 184 | "bg-fixed": "background-attachment: fixed", 185 | "bg-local": "background-attachment: local", 186 | "bg-scroll": "background-attachment: scroll", 187 | "bg-clip-border": "background-clip: border-box", 188 | "bg-clip-padding": "background-clip: padding-box", 189 | "bg-clip-content": "background-clip: content-box", 190 | "bg-clip-text": "background-clip: text", 191 | "bg-bottom": "background-position: bottom", 192 | "bg-center": "background-position: center", 193 | "bg-left": "background-position: left", 194 | "bg-left-bottom": "background-position: left bottom", 195 | "bg-left-top": "background-position: left top", 196 | "bg-right": "background-position: right", 197 | "bg-right-bottom": "background-position: right bottom", 198 | "bg-right-top": "background-position: right top", 199 | "bg-top": "background-position: top", 200 | "bg-repeat": "background-repeat: repeat", 201 | "bg-no-repeat": "background-repeat: no-repeat", 202 | "bg-repeat-x": "background-repeat: repeat-x", 203 | "bg-repeat-y": "background-repeat: repeat-y", 204 | "bg-repeat-round": "background-repeat: round", 205 | "bg-repeat-space": "background-repeat: space", 206 | "bg-auto": "background-size: auto", 207 | "bg-cover": "background-size: cover", 208 | "bg-contain": "background-size: contain", 209 | "bg-none": "background-image: none", 210 | "bg-gradient-to-t": "background-image: linear-gradient(to top, var(--tw-gradient-stops))", 211 | "bg-gradient-to-tr": "background-image: linear-gradient(to top right, var(--tw-gradient-stops))", 212 | "bg-gradient-to-r": "background-image: linear-gradient(to right, var(--tw-gradient-stops))", 213 | "bg-gradient-to-br": "background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))", 214 | "bg-gradient-to-b": "background-image: linear-gradient(to bottom, var(--tw-gradient-stops))", 215 | "bg-gradient-to-bl": "background-image: linear-gradient(to bottom left, var(--tw-gradient-stops))", 216 | "bg-gradient-to-l": "background-image: linear-gradient(to left, var(--tw-gradient-stops))", 217 | "bg-gradient-to-tl": "background-image: linear-gradient(to top left, var(--tw-gradient-stops))", 218 | "list-inside": "list-style-position: inside", 219 | "list-outside": "list-style-position: outside", 220 | "antialiased": `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`, 221 | "subpixel-antialiased": `-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;`, 222 | "normal-nums": "font-variant-numeric: normal", 223 | "ordinal": "font-variant-numeric: ordinal", 224 | "slashed-zero": "font-variant-numeric: slashed-zero", 225 | "lining-nums": "font-variant-numeric: lining-nums", 226 | "oldstyle-nums": "font-variant-numeric: oldstyle-nums", 227 | "proportional-nums": "font-variant-numeric: proportional-nums", 228 | "tabular-nums": "font-variant-numeric: tabular-nums", 229 | "diagonal-fractions": "font-variant-numeric: diagonal-fractions", 230 | "stacked-fractions": "font-variant-numeric: stacked-fractions", 231 | "transform": `--tw-translate-x: 0; 232 | --tw-translate-y: 0; 233 | --tw-rotate: 0; 234 | --tw-skew-x: 0; 235 | --tw-skew-y: 0; 236 | --tw-scale-x: 1; 237 | --tw-scale-y: 1; 238 | transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));`, 239 | "transform-gpu": `--tw-translate-x: 0; 240 | --tw-translate-y: 0; 241 | --tw-rotate: 0; 242 | --tw-skew-x: 0; 243 | --tw-skew-y: 0; 244 | --tw-scale-x: 1; 245 | --tw-scale-y: 1; 246 | transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));`, 247 | "transform-none": "transform: none", 248 | "origin-center": "transform-origin: center", 249 | "origin-top": "transform-origin: top", 250 | "origin-top-right": "transform-origin: top right", 251 | "origin-right": "transform-origin: right", 252 | "origin-bottom-right": "transform-origin: bottom right", 253 | "origin-bottom": "transform-origin: bottom", 254 | "origin-bottom-left": "transform-origin: bottom left", 255 | "origin-left": "transform-origin: left", 256 | "origin-top-left": "transform-origin: top left", 257 | "transition-none": "transition-property: none", 258 | "transition-all": `transition-property: all; 259 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 260 | transition-duration: 150ms;`, 261 | "transition": `transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; 262 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 263 | transition-duration: 150ms;`, 264 | "transition-colors": `transition-property: background-color, border-color, color, fill, stroke; 265 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 266 | transition-duration: 150ms;`, 267 | "transition-opacity": `transition-property: opacity; 268 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 269 | transition-duration: 150ms;`, 270 | "transition-shadow": `transition-property: box-shadow; 271 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 272 | transition-duration: 150ms;`, 273 | "transition-transform": `transition-property: transform; 274 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 275 | transition-duration: 150ms;`, 276 | "border-solid": "border-style: solid", 277 | "border-dashed": "border-style: dashed", 278 | "border-dotted": "border-style: dotted", 279 | "border-double": "border-style: double", 280 | "border-none": "border-style: none", 281 | "place-content-center": "place-content: center", 282 | "place-content-start": "place-content: start", 283 | "place-content-end": "place-content: end", 284 | "place-content-between": "place-content: space-between", 285 | "place-content-around": "place-content: space-around", 286 | "place-content-evenly": "place-content: space-evenly", 287 | "place-content-stretch": "place-content: stretch", 288 | "place-items-auto": "place-items: auto", 289 | "place-items-start": "place-items: start", 290 | "place-items-end": "place-items: end", 291 | "place-items-center": "place-items: center", 292 | "place-items-stretch": "place-items: stretch", 293 | "place-self-auto": "place-self: auto", 294 | "place-self-start": "place-self: start", 295 | "place-self-end": "place-self: end", 296 | "place-self-center": "place-self: center", 297 | "place-self-stretch": "place-self: stretch", 298 | "ring-inset": "--tw-ring-inset: inset", 299 | "grid-flow-row": "grid-auto-flow: row", 300 | "grid-flow-col": "grid-auto-flow: column", 301 | "grid-flow-row-dense": "grid-auto-flow: row dense", 302 | "grid-flow-col-dense": "grid-auto-flow: column dense", 303 | "hidden": "display: none", 304 | } 305 | -------------------------------------------------------------------------------- /lib/config.js: -------------------------------------------------------------------------------- 1 | import colors from "./colors.js"; 2 | 3 | export default () => ({ 4 | theme: { 5 | screens: { 6 | sm: '640px', 7 | md: '768px', 8 | lg: '1024px', 9 | xl: '1280px', 10 | '2xl': '1536px', 11 | }, 12 | colors: { 13 | transparent: 'transparent', 14 | current: 'currentColor', 15 | 16 | black: colors.black, 17 | white: colors.white, 18 | red: colors.red, 19 | yellow: colors.amber, 20 | green: colors.emerald, 21 | blue: colors.blue, 22 | indigo: colors.indigo, 23 | purple: colors.violet, 24 | pink: colors.pink, 25 | rose: colors.rose, 26 | fuchsia: colors.fuchsia, 27 | lightBlue: colors.lightBlue, 28 | cyan: colors.cyan, 29 | teal: colors.teal, 30 | lime: colors.lime, 31 | amber: colors.amber, 32 | orange: colors.orange, 33 | warmGray: colors.warmGray, 34 | trueGray: colors.trueGray, 35 | gray: colors.gray, 36 | coolGray: colors.coolGray, 37 | blueGray: colors.blueGray, 38 | }, 39 | spacing: { 40 | px: '1px', 41 | 0: '0px', 42 | 0.5: '0.125rem', 43 | 1: '0.25rem', 44 | 1.5: '0.375rem', 45 | 2: '0.5rem', 46 | 2.5: '0.625rem', 47 | 3: '0.75rem', 48 | 3.5: '0.875rem', 49 | 4: '1rem', 50 | 5: '1.25rem', 51 | 6: '1.5rem', 52 | 7: '1.75rem', 53 | 8: '2rem', 54 | 9: '2.25rem', 55 | 10: '2.5rem', 56 | 11: '2.75rem', 57 | 12: '3rem', 58 | 14: '3.5rem', 59 | 16: '4rem', 60 | 20: '5rem', 61 | 24: '6rem', 62 | 28: '7rem', 63 | 32: '8rem', 64 | 36: '9rem', 65 | 40: '10rem', 66 | 44: '11rem', 67 | 48: '12rem', 68 | 52: '13rem', 69 | 56: '14rem', 70 | 60: '15rem', 71 | 64: '16rem', 72 | 72: '18rem', 73 | 80: '20rem', 74 | 96: '24rem', 75 | }, 76 | animation: { 77 | none: 'none', 78 | spin: 'spin 1s linear infinite', 79 | ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', 80 | pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 81 | bounce: 'bounce 1s infinite', 82 | }, 83 | backgroundColor: (theme) => theme('colors'), 84 | backgroundImage: { 85 | none: 'none', 86 | 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', 87 | 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', 88 | 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', 89 | 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', 90 | 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', 91 | 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 92 | 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 93 | 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', 94 | }, 95 | backgroundOpacity: (theme) => theme('opacity'), 96 | backgroundPosition: { 97 | bottom: 'bottom', 98 | center: 'center', 99 | left: 'left', 100 | 'left-bottom': 'left bottom', 101 | 'left-top': 'left top', 102 | right: 'right', 103 | 'right-bottom': 'right bottom', 104 | 'right-top': 'right top', 105 | top: 'top', 106 | }, 107 | borderColor: (theme) => ({ 108 | ...theme('colors'), 109 | DEFAULT: theme('colors.gray.200', 'currentColor'), 110 | }), 111 | borderOpacity: (theme) => theme('opacity'), 112 | borderRadius: { 113 | none: '0px', 114 | sm: '0.125rem', 115 | DEFAULT: '0.25rem', 116 | md: '0.375rem', 117 | lg: '0.5rem', 118 | xl: '0.75rem', 119 | '2xl': '1rem', 120 | '3xl': '1.5rem', 121 | full: '9999px', 122 | }, 123 | borderWidth: { 124 | DEFAULT: '1px', 125 | 0: '0px', 126 | 2: '2px', 127 | 4: '4px', 128 | 8: '8px', 129 | }, 130 | boxShadow: { 131 | sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', 132 | DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 133 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 134 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', 135 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', 136 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', 137 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', 138 | none: 'none', 139 | }, 140 | container: {}, 141 | cursor: { 142 | auto: 'auto', 143 | default: 'default', 144 | pointer: 'pointer', 145 | wait: 'wait', 146 | text: 'text', 147 | move: 'move', 148 | 'not-allowed': 'not-allowed', 149 | }, 150 | divideColor: (theme) => theme('borderColor'), 151 | divideOpacity: (theme) => theme('borderOpacity'), 152 | divideWidth: (theme) => theme('borderWidth'), 153 | fill: { current: 'currentColor' }, 154 | fontSize: { 155 | xs: ['0.75rem', { lineHeight: '1rem' }], 156 | sm: ['0.875rem', { lineHeight: '1.25rem' }], 157 | base: ['1rem', { lineHeight: '1.5rem' }], 158 | lg: ['1.125rem', { lineHeight: '1.75rem' }], 159 | xl: ['1.25rem', { lineHeight: '1.75rem' }], 160 | '2xl': ['1.5rem', { lineHeight: '2rem' }], 161 | '3xl': ['1.875rem', { lineHeight: '2.25rem' }], 162 | '4xl': ['2.25rem', { lineHeight: '2.5rem' }], 163 | '5xl': ['3rem', { lineHeight: '1' }], 164 | '6xl': ['3.75rem', { lineHeight: '1' }], 165 | '7xl': ['4.5rem', { lineHeight: '1' }], 166 | '8xl': ['6rem', { lineHeight: '1' }], 167 | '9xl': ['8rem', { lineHeight: '1' }], 168 | }, 169 | fontWeight: { 170 | thin: '100', 171 | extralight: '200', 172 | light: '300', 173 | normal: '400', 174 | medium: '500', 175 | semibold: '600', 176 | bold: '700', 177 | extrabold: '800', 178 | black: '900', 179 | }, 180 | gap: (theme) => theme('spacing'), 181 | gradientColorStops: (theme) => theme('colors'), 182 | gridAutoColumns: { 183 | auto: 'auto', 184 | min: 'min-content', 185 | max: 'max-content', 186 | fr: 'minmax(0, 1fr)', 187 | }, 188 | gridAutoRows: { 189 | auto: 'auto', 190 | min: 'min-content', 191 | max: 'max-content', 192 | fr: 'minmax(0, 1fr)', 193 | }, 194 | gridColumn: { 195 | auto: 'auto', 196 | 'span-1': 'span 1 / span 1', 197 | 'span-2': 'span 2 / span 2', 198 | 'span-3': 'span 3 / span 3', 199 | 'span-4': 'span 4 / span 4', 200 | 'span-5': 'span 5 / span 5', 201 | 'span-6': 'span 6 / span 6', 202 | 'span-7': 'span 7 / span 7', 203 | 'span-8': 'span 8 / span 8', 204 | 'span-9': 'span 9 / span 9', 205 | 'span-10': 'span 10 / span 10', 206 | 'span-11': 'span 11 / span 11', 207 | 'span-12': 'span 12 / span 12', 208 | 'span-full': '1 / -1', 209 | }, 210 | gridColumnEnd: { 211 | auto: 'auto', 212 | 1: '1', 213 | 2: '2', 214 | 3: '3', 215 | 4: '4', 216 | 5: '5', 217 | 6: '6', 218 | 7: '7', 219 | 8: '8', 220 | 9: '9', 221 | 10: '10', 222 | 11: '11', 223 | 12: '12', 224 | 13: '13', 225 | }, 226 | gridColumnStart: { 227 | auto: 'auto', 228 | 1: '1', 229 | 2: '2', 230 | 3: '3', 231 | 4: '4', 232 | 5: '5', 233 | 6: '6', 234 | 7: '7', 235 | 8: '8', 236 | 9: '9', 237 | 10: '10', 238 | 11: '11', 239 | 12: '12', 240 | 13: '13', 241 | }, 242 | gridRow: { 243 | auto: 'auto', 244 | 'span-1': 'span 1 / span 1', 245 | 'span-2': 'span 2 / span 2', 246 | 'span-3': 'span 3 / span 3', 247 | 'span-4': 'span 4 / span 4', 248 | 'span-5': 'span 5 / span 5', 249 | 'span-6': 'span 6 / span 6', 250 | 'span-full': '1 / -1', 251 | }, 252 | gridRowStart: { 253 | auto: 'auto', 254 | 1: '1', 255 | 2: '2', 256 | 3: '3', 257 | 4: '4', 258 | 5: '5', 259 | 6: '6', 260 | 7: '7', 261 | }, 262 | gridRowEnd: { 263 | auto: 'auto', 264 | 1: '1', 265 | 2: '2', 266 | 3: '3', 267 | 4: '4', 268 | 5: '5', 269 | 6: '6', 270 | 7: '7', 271 | }, 272 | transformOrigin: { 273 | center: 'center', 274 | top: 'top', 275 | 'top-right': 'top right', 276 | right: 'right', 277 | 'bottom-right': 'bottom right', 278 | bottom: 'bottom', 279 | 'bottom-left': 'bottom left', 280 | left: 'left', 281 | 'top-left': 'top left', 282 | }, 283 | gridTemplateColumns: { 284 | none: 'none', 285 | 1: 'repeat(1, minmax(0, 1fr))', 286 | 2: 'repeat(2, minmax(0, 1fr))', 287 | 3: 'repeat(3, minmax(0, 1fr))', 288 | 4: 'repeat(4, minmax(0, 1fr))', 289 | 5: 'repeat(5, minmax(0, 1fr))', 290 | 6: 'repeat(6, minmax(0, 1fr))', 291 | 7: 'repeat(7, minmax(0, 1fr))', 292 | 8: 'repeat(8, minmax(0, 1fr))', 293 | 9: 'repeat(9, minmax(0, 1fr))', 294 | 10: 'repeat(10, minmax(0, 1fr))', 295 | 11: 'repeat(11, minmax(0, 1fr))', 296 | 12: 'repeat(12, minmax(0, 1fr))', 297 | }, 298 | gridTemplateRows: { 299 | none: 'none', 300 | 1: 'repeat(1, minmax(0, 1fr))', 301 | 2: 'repeat(2, minmax(0, 1fr))', 302 | 3: 'repeat(3, minmax(0, 1fr))', 303 | 4: 'repeat(4, minmax(0, 1fr))', 304 | 5: 'repeat(5, minmax(0, 1fr))', 305 | 6: 'repeat(6, minmax(0, 1fr))', 306 | }, 307 | height: (theme) => ({ 308 | auto: 'auto', 309 | ...theme('spacing'), 310 | '1/2': '50%', 311 | '1/3': '33.333333%', 312 | '2/3': '66.666667%', 313 | '1/4': '25%', 314 | '2/4': '50%', 315 | '3/4': '75%', 316 | '1/5': '20%', 317 | '2/5': '40%', 318 | '3/5': '60%', 319 | '4/5': '80%', 320 | '1/6': '16.666667%', 321 | '2/6': '33.333333%', 322 | '3/6': '50%', 323 | '4/6': '66.666667%', 324 | '5/6': '83.333333%', 325 | full: '100%', 326 | screen: '100vh', 327 | }), 328 | inset: (theme, { negative }) => ({ 329 | auto: 'auto', 330 | ...theme('spacing'), 331 | ...negative(theme('spacing')), 332 | '1/2': '50%', 333 | '1/3': '33.333333%', 334 | '2/3': '66.666667%', 335 | '1/4': '25%', 336 | '2/4': '50%', 337 | '3/4': '75%', 338 | full: '100%', 339 | '-1/2': '-50%', 340 | '-1/3': '-33.333333%', 341 | '-2/3': '-66.666667%', 342 | '-1/4': '-25%', 343 | '-2/4': '-50%', 344 | '-3/4': '-75%', 345 | '-full': '-100%', 346 | }), 347 | keyframes: { 348 | spin: { 349 | to: { 350 | transform: 'rotate(360deg)', 351 | }, 352 | }, 353 | ping: { 354 | '75%, 100%': { 355 | transform: 'scale(2)', 356 | opacity: '0', 357 | }, 358 | }, 359 | pulse: { 360 | '50%': { 361 | opacity: '.5', 362 | }, 363 | }, 364 | bounce: { 365 | '0%, 100%': { 366 | transform: 'translateY(-25%)', 367 | animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', 368 | }, 369 | '50%': { 370 | transform: 'none', 371 | animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', 372 | }, 373 | }, 374 | }, 375 | letterSpacing: { 376 | tighter: '-0.05em', 377 | tight: '-0.025em', 378 | normal: '0em', 379 | wide: '0.025em', 380 | wider: '0.05em', 381 | widest: '0.1em', 382 | }, 383 | lineHeight: { 384 | none: '1', 385 | tight: '1.25', 386 | snug: '1.375', 387 | normal: '1.5', 388 | relaxed: '1.625', 389 | loose: '2', 390 | 3: '.75rem', 391 | 4: '1rem', 392 | 5: '1.25rem', 393 | 6: '1.5rem', 394 | 7: '1.75rem', 395 | 8: '2rem', 396 | 9: '2.25rem', 397 | 10: '2.5rem', 398 | }, 399 | listStyleType: { 400 | none: 'none', 401 | disc: 'disc', 402 | decimal: 'decimal', 403 | }, 404 | margin: (theme, { negative }) => ({ 405 | auto: 'auto', 406 | ...theme('spacing'), 407 | ...negative(theme('spacing')), 408 | }), 409 | maxHeight: (theme) => ({ 410 | ...theme('spacing'), 411 | full: '100%', 412 | screen: '100vh', 413 | }), 414 | maxWidth: (theme, { breakpoints }) => ({ 415 | none: 'none', 416 | 0: '0rem', 417 | xs: '20rem', 418 | sm: '24rem', 419 | md: '28rem', 420 | lg: '32rem', 421 | xl: '36rem', 422 | '2xl': '42rem', 423 | '3xl': '48rem', 424 | '4xl': '56rem', 425 | '5xl': '64rem', 426 | '6xl': '72rem', 427 | '7xl': '80rem', 428 | full: '100%', 429 | min: 'min-content', 430 | max: 'max-content', 431 | prose: '65ch', 432 | ...breakpoints(theme('screens')), 433 | }), 434 | minHeight: { 435 | 0: '0px', 436 | full: '100%', 437 | screen: '100vh', 438 | }, 439 | minWidth: { 440 | 0: '0px', 441 | full: '100%', 442 | min: 'min-content', 443 | max: 'max-content', 444 | }, 445 | objectPosition: { 446 | bottom: 'bottom', 447 | center: 'center', 448 | left: 'left', 449 | 'left-bottom': 'left bottom', 450 | 'left-top': 'left top', 451 | right: 'right', 452 | 'right-bottom': 'right bottom', 453 | 'right-top': 'right top', 454 | top: 'top', 455 | }, 456 | opacity: { 457 | 0: '0', 458 | 5: '0.05', 459 | 10: '0.1', 460 | 20: '0.2', 461 | 25: '0.25', 462 | 30: '0.3', 463 | 40: '0.4', 464 | 50: '0.5', 465 | 60: '0.6', 466 | 70: '0.7', 467 | 75: '0.75', 468 | 80: '0.8', 469 | 90: '0.9', 470 | 95: '0.95', 471 | 100: '1', 472 | }, 473 | outline: { 474 | none: ['2px solid transparent', '2px'], 475 | white: ['2px dotted white', '2px'], 476 | black: ['2px dotted black', '2px'], 477 | }, 478 | padding: (theme) => theme('spacing'), 479 | placeholderColor: (theme) => theme('colors'), 480 | placeholderOpacity: (theme) => theme('opacity'), 481 | ringColor: (theme) => ({ 482 | DEFAULT: theme('colors.blue.500', '#3b82f6'), 483 | ...theme('colors'), 484 | }), 485 | ringOffsetColor: (theme) => theme('colors'), 486 | ringOffsetWidth: { 487 | 0: '0px', 488 | 1: '1px', 489 | 2: '2px', 490 | 4: '4px', 491 | 8: '8px', 492 | }, 493 | ringOpacity: (theme) => ({ 494 | DEFAULT: '0.5', 495 | ...theme('opacity'), 496 | }), 497 | ringWidth: { 498 | DEFAULT: '3px', 499 | 0: '0px', 500 | 1: '1px', 501 | 2: '2px', 502 | 4: '4px', 503 | 8: '8px', 504 | }, 505 | rotate: { 506 | '-180': '-180deg', 507 | '-90': '-90deg', 508 | '-45': '-45deg', 509 | '-12': '-12deg', 510 | '-6': '-6deg', 511 | '-3': '-3deg', 512 | '-2': '-2deg', 513 | '-1': '-1deg', 514 | 0: '0deg', 515 | 1: '1deg', 516 | 2: '2deg', 517 | 3: '3deg', 518 | 6: '6deg', 519 | 12: '12deg', 520 | 45: '45deg', 521 | 90: '90deg', 522 | 180: '180deg', 523 | }, 524 | scale: { 525 | 0: '0', 526 | 50: '.5', 527 | 75: '.75', 528 | 90: '.9', 529 | 95: '.95', 530 | 100: '1', 531 | 105: '1.05', 532 | 110: '1.1', 533 | 125: '1.25', 534 | 150: '1.5', 535 | }, 536 | skew: { 537 | '-12': '-12deg', 538 | '-6': '-6deg', 539 | '-3': '-3deg', 540 | '-2': '-2deg', 541 | '-1': '-1deg', 542 | 0: '0deg', 543 | 1: '1deg', 544 | 2: '2deg', 545 | 3: '3deg', 546 | 6: '6deg', 547 | 12: '12deg', 548 | }, 549 | space: (theme, { negative }) => ({ 550 | ...theme('spacing'), 551 | ...negative(theme('spacing')), 552 | }), 553 | strokeWidth: { 554 | 0: '0', 555 | 1: '1', 556 | 2: '2', 557 | }, 558 | textColor: (theme) => theme('colors'), 559 | textOpacity: (theme) => theme('opacity'), 560 | transitionDuration: { 561 | DEFAULT: '150ms', 562 | 75: '75ms', 563 | 100: '100ms', 564 | 150: '150ms', 565 | 200: '200ms', 566 | 300: '300ms', 567 | 500: '500ms', 568 | 700: '700ms', 569 | 1000: '1000ms', 570 | }, 571 | transitionDelay: { 572 | 75: '75ms', 573 | 100: '100ms', 574 | 150: '150ms', 575 | 200: '200ms', 576 | 300: '300ms', 577 | 500: '500ms', 578 | 700: '700ms', 579 | 1000: '1000ms', 580 | }, 581 | transitionProperty: { 582 | none: 'none', 583 | all: 'all', 584 | DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', 585 | colors: 'background-color, border-color, color, fill, stroke', 586 | opacity: 'opacity', 587 | shadow: 'box-shadow', 588 | transform: 'transform', 589 | }, 590 | transitionTimingFunction: { 591 | DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', 592 | linear: 'linear', 593 | in: 'cubic-bezier(0.4, 0, 1, 1)', 594 | out: 'cubic-bezier(0, 0, 0.2, 1)', 595 | 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', 596 | }, 597 | translate: (theme, { negative }) => ({ 598 | ...theme('spacing'), 599 | ...negative(theme('spacing')), 600 | '1/2': '50%', 601 | '1/3': '33.333333%', 602 | '2/3': '66.666667%', 603 | '1/4': '25%', 604 | '2/4': '50%', 605 | '3/4': '75%', 606 | full: '100%', 607 | '-1/2': '-50%', 608 | '-1/3': '-33.333333%', 609 | '-2/3': '-66.666667%', 610 | '-1/4': '-25%', 611 | '-2/4': '-50%', 612 | '-3/4': '-75%', 613 | '-full': '-100%', 614 | }), 615 | width: (theme) => ({ 616 | auto: 'auto', 617 | ...theme('spacing'), 618 | '1/2': '50%', 619 | '1/3': '33.333333%', 620 | '2/3': '66.666667%', 621 | '1/4': '25%', 622 | '2/4': '50%', 623 | '3/4': '75%', 624 | '1/5': '20%', 625 | '2/5': '40%', 626 | '3/5': '60%', 627 | '4/5': '80%', 628 | '1/6': '16.666667%', 629 | '2/6': '33.333333%', 630 | '3/6': '50%', 631 | '4/6': '66.666667%', 632 | '5/6': '83.333333%', 633 | '1/12': '8.333333%', 634 | '2/12': '16.666667%', 635 | '3/12': '25%', 636 | '4/12': '33.333333%', 637 | '5/12': '41.666667%', 638 | '6/12': '50%', 639 | '7/12': '58.333333%', 640 | '8/12': '66.666667%', 641 | '9/12': '75%', 642 | '10/12': '83.333333%', 643 | '11/12': '91.666667%', 644 | full: '100%', 645 | screen: '100vw', 646 | min: 'min-content', 647 | max: 'max-content', 648 | }), 649 | zIndex: { 650 | auto: 'auto', 651 | 0: '0', 652 | 10: '10', 653 | 20: '20', 654 | 30: '30', 655 | 40: '40', 656 | 50: '50', 657 | }, 658 | }, 659 | }); 660 | --------------------------------------------------------------------------------