How do I find the utilities package in the NextJS tailwindcss docs?

Question

In the tailwindcss documentation site (https://github.com/tailwindlabs/tailwindcss.com/tree/master), they have have the following import:

import utilities from 'utilities?plugin=width'

as part of something like:

import utilities from 'utilities?plugin=width'
import { numbersFirst } from '@/utils/sortClasses'
import { ArbitraryValues } from '@/components/ArbitraryValues'
import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries'
import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates'

export const classes = {
  utilities,
  sort: numbersFirst,
}

## Basic usage
... rest of the documentation

Looking at package.json, I don't see a package called "utilities". So, I think it must be defined somewhere in the repository, but I can't find it.

Where is this utilities package, and how is it defined?

https://github.com/tailwindlabs/tailwindcss.com/blob/50cc89f042c4a4bbbeef932c182a65926d22e8ba/next.config.mjs#L79-L90 — jonrsharpe, Jun 25 '23 at 08:12
You really should add a link to a place where such an import is actually used. E.g. [src/pages/docs/width.mdx](https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/pages/docs/width.mdx#L6) — kca, Jun 26 '23 at 11:53

score 1 · Accepted Answer · answered Jun 26 '23 at 12:39

The package tailwindlabs/tailwindcss.com uses webpacks resolve.alias configuration to map an import named "utilities" to the file tailwindcss/lib/corePlugins.js (which is probably created from tailwinds /src/corePlugins.js).

This is done inside the configuration file next.config.mjs.

How do I find the utilities package in the NextJS tailwindcss docs?

1 Answers1