A 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.jsfile:/** @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">