Tailwind CSS

If Tailwind CSS is already enabled in your project, you have nothing else to do. Otherwise, please refer to your framework documentation.

@apply (Tailwind v3)

In v3, you can use the Tailwind’s @apply directive.

Button.mist.css

@scope (button.button) {
  :scope {
    @apply bg-black text-white;

    &[data-variant="primary"] {
      @apply bg-blue-700;
    }
  }
}

CSS Variables (Tailwind v4)

In v4, Tailwind provides CSS variables that can be used in your CSS.

Button.mist.css

@scope (button.button) {
  :scope {
    background-color: var(--colors-black);
    color: var(--colors-white);

    &[data-variant="primary"] {
      background-color: var(--colors-blue-700);
    }
  }
}

JavaScript

You can also import Tailwind’s theme and apply it from there.

Button.mist.css

@scope (button.button) {
  :scope {
    /* Expose padding and color props */
    --padding: 0;
    --color: black;

    padding: var(--padding);
    color: var(--color);
  }
}

App.tsx

import theme from 'tailwindcss/defaultTheme'

export const App = () => (
  <CustomButton
    padding={theme.spacing.8}
    color={theme.colors.blue.900}
  >
    Save
  </CustomButton>
)