Rank 1
I see that KendoReact offers a lot of the CSS utility classes like e.g. Tailwind CSS does. I would like to use those for things like flexbox and CSS grid, but also for generic padding and margins and such, in the same way I would with Tailwind.
Is there any documentation for these utility classes somewhere on the site? I cannot seem to find any.
Also, in my IDE (Webstorm) the autocomplete offers classes prefixed with 'k-' but also '!k-' and 'k-i-'. What is the difference between these?
Lastly, would it be possible to use Tailwind instead of KendoReact's utility classes alltogether?
How would I go about removing the classes from KendoReact if I wanted to? (without having to delete all of them by hand from the ...-all.css files)
Or perhaps better yet... is there a general 'kendo-react' way to use flexbox or css grid classes?
1 Answer, 1 is accepted
Hi, Ramon,
In regard to your questions:
1) The classes that KendoReact uses are intended mainly for the shipped components, unlike Tailwind which uses classes for flex layout and more generic scenarios in layouting. A list of the customizable variables in a theme can be found in the following section of the docs, however, those are not utility classes in the same way as in Tailwind:
https://www.telerik.com/kendo-react-ui/components/styling/customizing/2) The 'k-i ' classes are usually responsible for the icons that are present in some components, however, I couldn't find a class starting with '!k-'
3) Removing the kendo-react classes is currently not possible, as they provide styling for the components, and using only Tailwind classes is not possible since the classes cannot be removed.
4) The shipped components use flexbox for their layout, however, there is no general way of using CSS flexbox, as the library focuses mostly on delivering reusable components rather than providing utility classes for creating a layout as Tailwind does. This allows the developer to use any approach he needs when creating a layout in his app.
I hope this helps.
Regards,
FilipProgress Telerik
Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.
Rank 1
thanks for getting back to me!
as it turns out, I completely missed the StackLayout and GridLayout components Kendo offers. It looks like I can achieve what I want to do using these components.
The classes with the '!k-' prefix turn up in the autocomplete popup in Webstorm:
Hello, Ramon,
I am glad to hear that you have found KendoReact component that will prove useful.
The classes starting with !k are used to position the components using the FlexBox layout.
Regards,
Filip