next.jsmdxjs

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

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?

Solution

  • 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.