Try it out

Don't know how to get started writing styles in Griffel? Having trouble getting your styles to work the way you want to?

Use the editor below to try it out! Griffel on the left, CSS on the right. There are a collection of templates on the sidebar to get you started.

import { makeStyles, shorthands } from '@griffel/core';

export default makeStyles({
  root: {
    backgroundColor: 'red',
    paddingLeft: '10px',
    '@media(forced-colors: active)': {
      ...shorthands.borderColor('transparent'),
    },
  },
});