Tailwind

We use Tailwind to build our CSS (specifically the utility classes), and we encourage consumers of the design system to use it too.

info

We currently build our CSS with Tailwind version 2.x. Please review Tailwind's upgrade guide for incompatibilities if you're using version 3.x or higher.

Preset

We publish a Tailwind preset so that you can use it in your own tailwind.config.js like so:

tailwind.config.js

module.exports = {
  presets: ["@sfgov/design-system/tailwind.preset"],
  theme: {
    extend: {
      // your theme extensions here
    },
  }
}

Theme

If you don't want or need all of the plugins provided by our preset, you can import the theme directly:

const theme = require('@sfgov/design-system/css/src/theme')
module.exports = {
  theme,
  // your plugins, etc.
}

If you need to extend the theme, you'll need to merge it manually, e.g.:

const merge = require('merge-deep')
const theme = require('@sfgov/design-system/css/src/theme')
module.exports = {
  theme: merge(theme, {
    // your theme extensions here
  }),
  // your plugins, etc.
}