tailwind-preset-primer v0.0.1

tailwind-preset-primer

Tailwind preset for the GitHub Design System (Primer)

Getting started

To install tailwind-preset-primer in your project, you will need to run the following command using npm:

npm install -S tailwind-preset-primer

If you prefer Yarn, use the following command instead:

yarn add tailwind-preset-primer

You can then add this package as a preset in your project's tailwind.config.js file:

module.exports = {
  presets: [require('tailwind-preset-primer')],
};

Supported themes

tailwind-preset-primer supports the following themes from Primer out-of-the-box:

The preset also includes support for a dynamic theme through require('tailwind-preset-primer/dynamic'). The dynamic theme allows you to swap between themes instead of using only one theme.

Dynamic theme

The dynamic theme requires your project to setup CSS Custom Properties from @primer/primitives that correspond to the various color scales and tokens based on each theme.

You can find an example of this using Sass in our Next.js example.

📚 Examples

If you're looking for more examples on how to use tailwind-preset-primer, we have some examples that you can check out:

• Next.js

📝 License

Licensed under the Apache 2.0 License.