Features

• Mixins
• Function
• ...

Mixin

              @mixin mobile-only {
  @media (max-width: $mobile-width) {
    @content;
  }
}
            

              .root {
  @include mobile-only {
    display: none;
  }
}
            

Function

                @function spacing($space) {
  @if $space == 4 {
    @return "4px";
  } @else if $space == 8 {
    @return "8px";
  }
  ...
}
              

                .root {
  padding: spacing(4);
}
              

Class conflict

Component1.scss

              .root {
  color: red;
}
            

Component2.scss

              .root {
  color: green;
}
            

              .root { color: red; }
            

to

              .root-h2l5l { color: red; }
            

              import styles from './Component.module.scss';
            

              <div className={styles.root} />;
            

Apply multiple classNames

<div className={styles.root + " " + styles.primary} />

<div className={classnames(styles.root, styles.primary)} />

Apply conditional className

<div className={isPrimary ? styles.primary : ""} />

<div className={classnames({
    [styles.primary]: isPrimary
  })}
/>

More info about classnames:

classnames

export function Example() {
  return (
    <div className="px-5 pt-4 flex items-center justify-between">
      <div>
        <img className="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="" />
      </div>
    </div>
  );
}

Elements are styled using utility CSS classes.

tailwindcss.com

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  color: white;
  border: 2px solid white;

  ${props => isPrimary && css`
    background: white;
    color: black;
  `}
`;

There are different CSS in JS approaches, e.g.:

• styled-components
• vanilla-extract (compiled to css)
• Emotion
• JSS
• Stitches