How to use Tailwind or raw CSS with React Query Builder

[coderyeasin]

Is it support with tailwind css? Or how can i use raw css

[jakeboone02]

I haven't actually tried Tailwind yet, but you can use the controlClassnames prop to assign custom CSS classes to each component in the query builder (documentation here). You can also apply styles to the standard classes (documentation here).

[coderyeasin]

Thank you for your suggestion, i tried but can't implement actual design.

[jakeboone02]

Can you put together a codesandbox or other live demo with your attempt? I would love to see where you got stuck, if nothing else.

[jakeboone02]

I couldn't get a codesandbox to work properly with tailwind, but I did get this stackblitz to work (repo here). I just put some playful colors and styling on the base RQB structure by adding classes to the controlClassnames prop. Let me know if that resolves the issues you had.

Operative code:

const App = () => (
  <div>
    <h2 className="font-bold mb-2 text-sky-700">
      React Query Builder Tailwind Test
    </h2>
    <QueryBuilder
      fields={fields}
      defaultQuery={defaultQuery}
      controlClassnames={{
        queryBuilder: 'rounded-lg bg-sky-600/20 shadow-xl',
        ruleGroup: 'rounded-lg bg-sky-600/20 shadow',
        combinators: 'text-red-600 rounded-l-full p-1',
        addRule: 'bg-white text-orange-600 rounded-none p-1 shadow',
        addGroup: 'bg-white text-yellow-600 rounded-r-full p-1 shadow',
        fields: 'bg-white text-green-600 rounded-l-full p-1 shadow',
        operators: 'bg-white text-blue-600 rounded-none p-1 shadow',
        value: 'bg-white text-purple-600 rounded-r-full p-1 shadow w-32',
        removeGroup: 'text-[#006699]/50 p-1 ml-auto',
        removeRule: 'text-[#006699]/50 p-1 ml-auto',
      }}
    />
  </div>
);

Produces this: