open-index/open-npm huggingface dataset:
npm package: @githubnext/primer-tailwind-plugin
Description: A Tailwind CSS plugin that creates utility classes for Primer Primitives.
Latest version: 0.3.0

# @githubnext/primer-tailwind-plugin

A Tailwind CSS plugin that creates utility classes for [Primer Primitives](https://github.com/primer/primitives). Intended for use in [GitHub Next](https://githubnext.com) prototypes.

> [!WARNING]
> This is not an official [GitHub Primer](https://primer.style) package.

## Installation

1. Install the plugin:

   ```shell
   npm install -D @githubnext/primer-tailwind-plugin
   ```

1. Install the peer dependencies if they're not already installed:

   ```shell
   npm install -D tailwindcss
   npm install @primer/primitives
   ```

1. Add the plugin to your `tailwind.config.js` file:

   ```js
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     theme: {
       // ...
     },
     plugins: [
       require('@githubnext/primer-tailwind-plugin'),
       // ...
     ],
   }
   ```

1. Import the CSS variables:

   ```css
   /* globals.css */
   @import "@githubnext/primer-tailwind-plugin/primitives.css";
   ```

1. Add the following attributes to your root html element:

   ```html
   <html
     data-color-mode="auto" <!-- "auto" or "light" or "dark" -->
     data-light-theme="light"
     data-dark-theme="dark"
   >
     ...
   </html>
   ```

## Usage examples

### Color

```html
<div class="text-fgColor-default bg-bgColor-default border border-borderColor-default">
```

[Reference](https://primer.style/primitives/storybook/?path=/story/color-functional-all--all)

### Box shadow

```html
<div class="shadow-resting-small">
```

[Reference](https://primer.style/primitives/storybook/?path=/story/color-functional-shadows--shadows)

### Typography


```html
<div class="text-body-medium">
```

[Reference](https://primer.style/primitives/storybook/?path=/story/typography-functional--font-shorthand)

### Border radius

```html
<div class="rounded-medium">
```

[Reference](https://primer.style/primitives/storybook/?path=/story/size-functional-border--border-radius)


## Guidelines

Prefer using these utility classes over the `sx` prop from [Primer React](https://github.com/primer/react), which is less performant and no longer recommended by the Primer team.

**❌ Don't**

```jsx
<Box sx={{ bg: 'canvas.muted' }}>
```

**✅ Do**

```jsx
<div className="bg-bgColor-muted">
```