$ npm install @githubnext/primer-tailwind-pluginA Tailwind CSS plugin that creates utility classes for Primer Primitives. Intended for use in GitHub Next prototypes.
[!WARNING] This is not an official GitHub Primer package.
Install the plugin:
npm install -D @githubnext/primer-tailwind-plugin
Install the peer dependencies if they're not already installed:
npm install -D tailwindcss
npm install @primer/primitives
Add the plugin to your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// ...
},
plugins: [
require('@githubnext/primer-tailwind-plugin'),
// ...
],
}
Import the CSS variables:
/* globals.css */
@import "@githubnext/primer-tailwind-plugin/primitives.css";
Add the following attributes to your root html element:
<html
data-color-mode="auto" <!-- "auto" or "light" or "dark" -->
data-light-theme="light"
data-dark-theme="dark"
>
...
</html>
<div class="text-fgColor-default bg-bgColor-default border border-borderColor-default">
<div class="shadow-resting-small">
<div class="text-body-medium">
<div class="rounded-medium">
Prefer using these utility classes over the sx prop from Primer React, which is less performant and no longer recommended by the Primer team.
❌ Don't
<Box sx={{ bg: 'canvas.muted' }}>
✅ Do
<div className="bg-bgColor-muted">