diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 0fc78bd..7565f46 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,12 @@ + Document -

testing

+
\ No newline at end of file diff --git a/styles.css b/styles.css index f6a03c1..3af98f9 100644 --- a/styles.css +++ b/styles.css @@ -596,25 +596,6 @@ video { --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/); --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.text-\[4rem\] { - font-size: 4rem; +:root { + font-size: 62.5%; } -.font-bold { - font-weight: 700; -} -.text-blue-400 { - --tw-text-opacity: 1; - color: rgba(96, 165, 250, var(--tw-text-opacity)); -} -@media (min-width: 400px) { - - .custom\:text-red-500 { - --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); - } - - .custom\:text-green-500 { - --tw-text-opacity: 1; - color: rgba(16, 185, 129, var(--tw-text-opacity)); - } -} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 88a61fd..37f2bc4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,15 @@ +const plugin = require('tailwindcss/plugin') + +const labelChildOnChecked = plugin(function ({ addVariant, e }) { + addVariant('labelChildOnChecked', ({ modifySelectors, separator }) => { + modifySelectors(({ className }) => { + return `.${e(`labelChildOnChecked${separator}${className}`)}:checked + * *`; + }) + }); +}); + +// :focus, :focus-within, :hover, :checked + module.exports = { mode: 'jit', purge: ['./index.html'], @@ -11,9 +23,57 @@ module.exports = { }, variants: { extend: { - backgroundColor: ['checked'], + backgroundColor: ['checked', 'important', 'labelChildOnChecked'], borderColor: ['checked'], + translate: ['labelChildOnChecked'], + transform: ['labelChildOnChecked'] } }, - plugins: [], + plugins: [ + plugin(function({ addVariant }) { + addVariant('important', ({ container }) => { + container.walkRules(rule => { + rule.selector = `.\\!${rule.selector.slice(1)}` + rule.walkDecls(decl => { + decl.important = true + }) + }) + }) + }) + , labelChildOnChecked +], } +// module.exports = { +// mode: 'jit', +// purge: ['./index.html'], +// darkMode: 'media', // or 'media' or 'class' +// theme: { +// extend: { +// screens: { +// 'custom': '400px' +// } +// }, +// }, +// variants: { +// extend: { +// backgroundColor: ['checked', 'checkedSibling'], +// borderColor: ['checked', 'checkedSibling'], +// } +// }, +// plugins: [ +// plugin(function ({addVariant, e}) { +// addVariant("checkedSibling", ({ container }) => { +// rule.selector = `:checked + .checkedSibling\\:${rule.selector.slice(1)}` +// }) +// }) +// ], +// } + + +// plugin(function ({ addVariant, e }) { +// addVariant("focused-sibling", ({ container }) => { +// container.walkRules((rule) => { +// rule.selector = `:focus + .focused-sibling\\:${rule.selector.slice(1)}`; +// }); +// }); +// }); \ No newline at end of file diff --git a/tailwind.css b/tailwind.css index bd6213e..a0cee2b 100644 --- a/tailwind.css +++ b/tailwind.css @@ -1,3 +1,6 @@ @tailwind base; +:root { + font-size: 62.5%; +} @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities;