Skip to content

Latest commit

 

History

History
35 lines (25 loc) · 1.23 KB

theming.mdx

File metadata and controls

35 lines (25 loc) · 1.23 KB
Raw
title description navigation github prev next
Theming - Material Tailwind
Learn how to customize and set your own theme for Material Tailwind components.
theming
class-name
theming
what-is-tailwind-css
colors

Theming - Material Tailwind

Customize @material-tailwind/html with your own theme. You can change the base styles like the colors, typography, box-shadows and breakpoints as well as the components style.

@material-tailwind/html is customizable using the tailwind.config.js and you can set your own theme and styles through the Tailwind CSS configurations for all of the components.

The class Attribute

Each component has a class attribute that you can use to add tailwindcss classnames or your own custom classnames.

The class attribute overrides the tailwindcss classnames for a component and sometimes you need to use the ! modifier before the tailwindcss classnames to override the classnames for a component.

e.g. !text-blue-500

<button class="button button-pink !bg-blue-500 px-4" data-ripple-light="true">
  Button
</button>