@githubnext/primer-tailwind-plugin
Advanced tools
A Tailwind CSS plugin that creates utility classes for Primer Primitives.
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.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">
FAQs
A Tailwind CSS plugin that creates utility classes for Primer Primitives.
We found that @githubnext/primer-tailwind-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.
Security News
An opt-in lazy import keyword aims to speed up Python startups, especially CLIs, without the ecosystem-wide risks that sank PEP 690.