[TextField] TextField slots with Tailwind (Next14)

[TomBell95]

I'm trying to create a dynamic TextField with slots for icons, however the slots are not working as expected? I've seen issues similar to CSS specificity issues w/ tailwind #109 but trying this solution has not worked...

Does anyone have any suggestions?

Docs: Themes/TextField

TextField component

import { joinClassNames } from '@/src/utils'
import * as Label from '@radix-ui/react-label'
import { TextField } from '@radix-ui/themes'
import { ReactNode } from 'react'

type TextInputType = 'text' | 'email' | 'password' | 'number' | 'submit'

interface TextInputProps {
  id: string
  type?: TextInputType
  labelText?: string
  placeholderText?: string
  labelClasses?: string
  inputClasses?: string
  disabled?: boolean
  leftIcon?: ReactNode
  rightIcon?: ReactNode
}

export const TextInput: React.FC<TextInputProps> = ({
  id,
  type = 'text',
  labelText,
  placeholderText,
  disabled,
  inputClasses,
  leftIcon,
  rightIcon,
}) => {
  return (
    <div>
      {labelText && (
        <Label.Root className='text-[15px] font-medium leading-[35px] ' htmlFor='firstName'>
          {labelText}
        </Label.Root>
      )}
      <TextField.Root className='flex justify-between items-center'>
        {leftIcon && <TextField.Slot>{leftIcon}</TextField.Slot>}
        <TextField.Input
          id={id}
          type={type}
          placeholder={placeholderText}
          className={joinClassNames('py-1.5 px-4', inputClasses ? inputClasses : '')}
          disabled={disabled}
        />
        {rightIcon && <TextField.Slot>{rightIcon}</TextField.Slot>}
      </TextField.Root>
    </div>
  )
}

package.json

{
  ...
  "@radix-ui/themes": "^2.0.0",
  "autoprefixer": "10.4.15",
  "next": "14.0.0",
  "postcss": "8.4.28",
  "tailwindcss": "3.3.3"
  ...
}

[vladmoroz]

What's not working exactly?

[TomBell95]

What's not working exactly?

Hi @vladmoroz - I would expect the icons to be within the input style as per the docs?

[vladmoroz]

I see, and what are you getting? A full reproduction with a link to CodeSandbox would be easier to understand.

Your code looks fine and should work, although I am not sure what's the purpose of the Tailwind classes on top of Radix Themes components (e.g. flex justify-between items-center on the Text Field Root element or py-1.5 px-4 on the Input element), as this kind of defeats the purpose of Radix Themes. Anyway, this is probably unrelated and doesn't break an example I am testing locally.

[TomBell95]

@vladmoroz Here is a quick example - on CodeSandbox - I would expect that without having to update styles the icon is placed in the correct position? And also able to apply the styles to the Root that encompasses both icon and input?

[vladmoroz]

Oh, I see. You are not importing Radix Themes CSS, please follow the docs guide:
https://www.radix-ui.com/themes/docs/overview/getting-started

It's not unstyled like the primitives, this is an opinionated component library with its own styles.

If you plan to continue using Radix Themes with Tailwind, make sure to check out this issue as the Tailwind reset overwrites our styles. We recommend to give it a go with plain CSS or CSS modules, as the value that Radix Themes provides and the value that Tailwind provides can get you into counterproductive situations.