crswll

A list of more specific theme keys for Tailwind CSS v4 I can't find documented elsewhere. The more specific key overrides the less specific key. Also, --foreground-color-* isn't a real thing. Just playing with the idea.

api	theme keys	property
accent	{ --color, --accent-color }	accent-color
animate	{ --animate }	animation
aspect	{ --aspect }	aspect-ratio
backdrop-blur	{ --blur, --backdrop-blur }	--tw-backdrop-blur
backdrop-brightness	{ --brightness, --backdrop-brightness }	--tw-backdrop-brightness
backdrop-contrast	{ --contrast, --backdrop-contrast }	--tw-backdrop-contrast

crswll

const searchParamsToObject = (params: URLSearchParams) => {
  const searchParamsAsObject: Record<string, string | string[]> = {}

  Array.from(params.entries()).forEach(([key, value]) => {
    const existingValue = searchParamsAsObject[key]

    if (existingValue) {
      searchParamsAsObject[key] = Array.isArray(existingValue)
        ? [...existingValue, value]
        : [existingValue, value]

crswll

# Set up the next app.
yarn create next-app $1 --typescript

# cd into it.
cd $1

# add tailwind and its deps
yarn add -D tailwindcss postcss autoprefixer postcss-import

# remove the default css file, we're going to replace it later

crswll

crswll

diff --git a/src/util/parseBoxShadowValue.js b/src/util/parseBoxShadowValue.js
index eb4872c7..5ed74a9e 100644
--- a/src/util/parseBoxShadowValue.js
+++ b/src/util/parseBoxShadowValue.js
@@ -1,58 +1,27 @@
-let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
+let KEYWORDS = ['inset', 'inherit', 'initial', 'revert', 'unset']
 let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-let LENGTH = /^-?(\d+)(.*?)$/g

crswll

<div class="group flex flex-col">
  <label class="text-gray-500 group-has-disabled:text-red-500">Name</label>
  <input class="border p-2" disabled />
</div>

crswll

$foo: theme('colors.red.400');

.foo {
    color: $foo;
}

crswll

:root {
  --stroke-base: 255 0 0
}

.foo {
  color: rgba(var(--stroke-base)/0.15)
}

crswll

@mixin button ($a, $b, $c) {
    color: $a;
    border: $b;
    content: $c;
}

.foo {
    @include button(#{theme('colors.white')}, 1px solid blue, 'hi')
}

crswll

.button-primary {
    color: theme('colors.error.10');
}