Tailwind: Components refactoring

[sarahgm]

Replace Components useComponentsStyles with new useClassNames hook. For reference have a look on useClassName.test.ts. Also test and story. Also add style currently there is a new theme called theme-core where we move/create the core theme. Related here: #2917

✨ Components (includes Test, Story, Component)

Application

• [x] Provider

Navigation

• [x] Tabs

Layout

• [x] Aside
• [x] Aspect
• [x] Box
• [x] Breakout
• [x] Center
• [x] Columns
• [x] Container
• [x] Inlline
• [x] Inset
• [x] Split
• [x] Stack
• [x] Tiles

Forms

• [x] Autocomplete
• [x] Button
• [x] Calendar
• [x] Checkbox
• [x] ComboBox
• [x] DateField
• [x] DatePicker
• [x] NumberField
• [x] Radio
• [x] Select
• [x] Slider
• [x] Switch
• [x] Tag
• [x] TextArea
• [x] TextField

Collections

• [x] Accordion
• [x] Table

Overlay

• [x] Dialog
• [x] Menu
• [x] Tooltip

Content

• [x] Badge
• [x] Body
• [x] Card
• [x] Divider
• [x] Footer
• [x] Header
• [x] Headline
• [x] Icon
• [x] Image
• [x] Link
• [x] List
• [x] Message
• [x] SVG
• [x] Text
• [x] VisuallyHidden
• [x] XLoader

Other

• [x] SVG
• [x] CheckboxGroup
• [x] RadioGroup
• [x] FieldBase
• [x] FieldGroup
• [x] HelpText
• [x] Input
• [x] Label
• [x] ListBox
• [x] Underlay
• [x] Popover
• [x] Modal
• [x] Tray

[sebald]

Plus this: https://www.npmjs.com/package/eslint-plugin-tailwindcss ?

[sarahgm]

Plus this: npmjs.com/package/eslint-plugin-tailwindcss ?

yes why not

[sarahgm]

• [x] script in project root that will watch and rebuild CSS files (tailwind config in root?)
• [x] exclude stories from tailwind builds
• [ ] prepare a blog post

[sarahgm]

ToDo: #2969

[sarahgm]

• [x] added npmjs.com/package/eslint-plugin-tailwindcss