[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?