[v4] @utility checkbox - Unknown word

[velipx]

What version of Tailwind CSS are you using?

^4.0.0-beta.2

What build tool (or framework if it abstracts the build tool) are you using?

Vite 5.0

What version of Node.js are you using?

v22.10.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue I have in my main app.css like this:

@import 'tailwindcss';
@import './_checkbox-radio-switch.css';

and here is checkbox-radio-switch.css:

@utility checkbox {
  @apply inline-flex items-center cursor-pointer relative;

  & input[type='checkbox'] {
    @apply absolute left-0 opacity-0 -z-1;
  }

  & input[type='checkbox'] + .check {
    @apply border-s3 border transition-colors duration-200 dark:bg-s5;
  }

  & input[type='checkbox']:focus + .check {
    @apply ring-3 ring-blue-700;
  }

  & input[type='checkbox'] + .check {
    @apply block w-5 h-5;
  }

  & input[type='checkbox'] + .check {
    @apply rounded-sm;
  }

  & input[type='checkbox']:checked + .check {
    @apply bg-no-repeat bg-center border-4;
  }

  & input[type='checkbox']:checked + .check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
  }

  & input[type='checkbox']:checked + .check {
    @apply bg-blue-600 border-blue-600;
  }
}

@utility radio {
  @apply inline-flex items-center cursor-pointer relative;

  & input[type='radio'] {
    @apply absolute left-0 opacity-0 -z-1;
  }

  & input[type='radio'] + .check {
    @apply border-s3 border transition-colors duration-200 dark:bg-s5;
  }

  & input[type='radio']:focus + .check {
    @apply ring-3 ring-blue-700;
  }

  & input[type='radio'] + .check {
    @apply block w-5 h-5;
  }

  & input[type='radio'] + .check {
    @apply rounded-full;
  }

  & input[type='radio']:checked + .check {
    @apply bg-no-repeat bg-center border-4;
  }

  & input[type='radio']:checked + .check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
  }

  & input[type='radio']:checked + .check {
    @apply bg-blue-600 border-blue-600;
  }
}

@utility switch {
  @apply inline-flex items-center cursor-pointer relative;

  & input[type='checkbox'] {
    @apply absolute left-0 opacity-0 -z-1;
  }

  & input[type='checkbox'] + .check {
    @apply border-s3 border transition-colors duration-200 dark:bg-s5;
  }

  & input[type='checkbox']:focus + .check {
    @apply ring-3 ring-blue-700;
  }

  & input[type='checkbox'] + .check {
    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
  }

  & input[type='checkbox'] + .check {
    @apply rounded-full;
  }

  & input[type='checkbox'] + .check:before {
    @apply rounded-full;
  }

  & input[type='checkbox']:checked + .check {
    @apply bg-blue-600 border-blue-600;
  }

  & input[type='checkbox'] + .check:before {
    content: '';
    @apply block w-5 h-5 bg-white border border-gray-700;
  }

  & input[type='checkbox']:checked + .check:before {
    transform: translate3d(110%, 0, 0);
    @apply border-blue-600;
  }
}

@utility check {
  .checkbox input[type='checkbox'] + & {
    @apply border-s3 border transition-colors duration-200 dark:bg-s5;
  }

  .radio input[type='radio'] + & {
    @apply border-s3 border transition-colors duration-200 dark:bg-s5;
  }

  .switch input[type='checkbox'] + & {
    @apply border-s3 border transition-colors duration-200 dark:bg-s5;
  }

  .checkbox input[type='checkbox']:focus + & {
    @apply ring-3 ring-blue-700;
  }

  .radio input[type='radio']:focus + & {
    @apply ring-3 ring-blue-700;
  }

  .switch input[type='checkbox']:focus + & {
    @apply ring-3 ring-blue-700;
  }

  .checkbox input[type='checkbox'] + & {
    @apply block w-5 h-5;
  }

  .radio input[type='radio'] + & {
    @apply block w-5 h-5;
  }

  .checkbox input[type='checkbox'] + & {
    @apply rounded-sm;
  }

  .switch input[type='checkbox'] + & {
    @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
  }

  .radio input[type='radio'] + & {
    @apply rounded-full;
  }

  .switch input[type='checkbox'] + & {
    @apply rounded-full;
  }

  .switch input[type='checkbox'] + &:before {
    @apply rounded-full;
  }

  .checkbox input[type='checkbox']:checked + & {
    @apply bg-no-repeat bg-center border-4;
  }

  .radio input[type='radio']:checked + & {
    @apply bg-no-repeat bg-center border-4;
  }

  .checkbox input[type='checkbox']:checked + & {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
  }

  .radio input[type='radio']:checked + & {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
  }

  .switch input[type='checkbox']:checked + & {
    @apply bg-blue-600 border-blue-600;
  }

  .checkbox input[type='checkbox']:checked + & {
    @apply bg-blue-600 border-blue-600;
  }

  .radio input[type='radio']:checked + & {
    @apply bg-blue-600 border-blue-600;
  }

  .switch input[type='checkbox'] + &:before {
    content: '';
    @apply block w-5 h-5 bg-white border border-gray-700;
  }

  .switch input[type='checkbox']:checked + &:before {
    transform: translate3d(110%, 0, 0);
    @apply border-blue-600;
  }
}

I'm getting this error:

[plugin:vite:css] [postcss] /Users/filip/code/velipx/resources/css/app.css:2356:14: Unknown word

/Users/filip/code/velipx/resources/css/app.css:2356:13

    at Input.error (/Users/filip/code/velipx/node_modules/postcss/lib/input.js:106:16)
    at Parser.unknownWord (/Users/filip/code/velipx/node_modules/postcss/lib/parser.js:593:22)
    at Parser.other (/Users/filip/code/velipx/node_modules/postcss/lib/parser.js:435:12)
    at Parser.parse (/Users/filip/code/velipx/node_modules/postcss/lib/parser.js:470:16)
    at parse (/Users/filip/code/velipx/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/Users/filip/code/velipx/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/Users/filip/code/velipx/node_modules/postcss/lib/processor.js:53:14)
    at compileCSS (file:///Users/filip/code/velipx/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:36897:59)
    at async TransformPluginContext.transform (file:///Users/filip/code/velipx/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:36170:11)
    at async PluginContainer.transform (file:///Users/filip/code/velipx/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49096:18
    ````

[wongjn]

I tried to recreate your error without success:

1. Created a minimum vite setup with @tailwindcss/[email protected].
2. Removed the custom @applyed classes in your CSS (otherwise there would be errors that they don't exist which is a different error to yours).
3. Added the custom class utilities you defined, into the index.html to get the classes to be processed and generated.

Tried via PostCSS in Vite instead with @tailwindcss/[email protected] and still had no such error.

Could you provide a full reproduction setup please? Preferrably as a remotely-hosted git repository.

[cossssmin]

Just for reference, seems to work fine in the playground:

https://play.tailwindcss.com/pJzIWUYCMx?file=css

[adamwathan]

Just as an aside, does this actually need to be a utility vs. just a class? The main difference is that a utility is something you combine with variants, like md:flex for example.

Do you actually ever need to do things like hover:checkbox where the element should only look like a checkbox on hover?

[philipp-spiess]

Hey @velipx. Not sure if you're still experiencing a bug but if you do feel free to create a new issue with a reproduction setup. For now I'm going to close this one as there doesn't seem to be anything unexpected right now. Thanks!

[stitchless]

I was dealing with this a lot and the errors would always truncate (svelte/sveltekit app with postcss). The way I figured it out was running the tailwindcss cli with --watch and output file. then I can see while line the error was on and finally search my codebase for the problem. For me it turned out to be me trying to use this:

https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}

After fixing that, everything worked as expected.

[Nefcanto]

@stitchless I tried to use your method to debug the "Unknown word" error. I tried these lines:

npx @tailwindcss/cli -o ./src/output.css --watch

npx @tailwindcss/cli -i ./src/global.css -o ./src/output.css --watch

But none shows me anything at all. Just prints Done. What do I miss here?