@githubnext/primer-tailwind-plugin
v0.3.0
Published
A Tailwind CSS plugin that creates utility classes for Primer Primitives.
Downloads
1,131
Keywords
Readme
@githubnext/primer-tailwind-plugin
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.
Installation
Install the plugin:
npm install -D @githubnext/primer-tailwind-pluginInstall the peer dependencies if they're not already installed:
npm install -D tailwindcss npm install @primer/primitivesAdd 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>
Usage examples
Color
<div class="text-fgColor-default bg-bgColor-default border border-borderColor-default">Box shadow
<div class="shadow-resting-small">Typography
<div class="text-body-medium">Border radius
<div class="rounded-medium">Guidelines
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">