Tailwind Tailwind CSS utilities.
The Tailwind utilities were designed to extend the default Tailwind setup, not to replace it. You can still use the default Tailwind utility classes alongside the DAP ones.
Use the Tailwind CSS IntelliSense extension for auto-completion and linting support in your IDE.
Class Variants font-dap-[variant] medium, bold
Class Variants text-dapT-[variant] 2xs, xs, sm, base, lg, xl, 2xl, ... 12xltext-dapT-body-[variant] small, medium, largetext-dapT-heading-[variant] 1, 2, 3, 4, 5, 6
Class Variants (spacing-prefix)-dap-[variant] 100, ... 6000(spacing-prefix)-dap-icon-[variant] xsmall, small, medium, base, large(spacing-prefix)-dap-cont-[variant] xsmall, small, medium, base, large, xlarge, 2xlarge
Class Variants shadow-dap-elevation-[variant] 200, 300, 400
The elevation levels are not yet complete, more will be added in future
releases.
Class Variants rounded-dap-[variant] small, medium, large, xlarge, rounded
Class Variants border-dapB-[variant] base, large, xlarge, 2xlarge
Class Variants dap-[variant] xsmall, small, medium, large, xlarge, 2xlarge
Custom variant Description dap-light: Applies styles when light mode is active. dap-dark: Applies styles when dark mode is active. dap-high-contrast: Applies styles when high contrast mode is active.
Class Description focus-ring Applies focus styles to an element on focus. focus-within-ring Applies focus styles to child elements on focus. dap-high-contrast-outline Applies high contrast outline styles.
Class Variants (color-prefix)-dap-bg-[variant] neutral, brand, positive, negative, informative, warning, overlay
Class Variants (color-prefix)-dap-border-[variant] neutral, brand, positive, negative, informative, warning
Class Variants (color-prefix)-dap-text-[variant] neutral, brand, positive, negative, informative, warning
Class Variants (color-prefix)-dap-icon-[variant] neutral, brand, positive, negative, informative, warning
Class Variants (color-prefix)-dap-focus-[variant] outer-ring, inner-ring
Class Variants (color-prefix)-dap-alpha-[variant] black, white
Class Variants (color-prefix)-dap-[variant] logo, logo-inverted