Registry / web-framework / tailwind-api-utils

tailwind-api-utils

JSON →
library1.0.3jsnpmunverified

tailwind-api-utils is a utility library designed to expose and simplify interaction with the internal Tailwind CSS API. It enables programmatic access to Tailwind's configuration and class processing functionalities, allowing developers to, for example, load a Tailwind configuration object and sort CSS class names according to Tailwind's internal rules. The current stable version is 1.0.3. The package has seen consistent updates, particularly to maintain compatibility with both Tailwind CSS v3 and the upcoming v4. Key differentiators include its explicit support for different Tailwind CSS versions and functionalities like class name sorting, which can be useful for linting or maintaining consistent class order in projects. It primarily targets build tools and environments where programmatic interaction with Tailwind's core features is beneficial.

npm install tailwind-api-utils
INSTALL
IMPORT
SIG · TAILWIND-API-UTILS
T
tailwind-api-utils
web-frameworkjavascriptv1.0.3
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

loadConfig
import { loadConfig } from 'tailwind-api-utils';
const loadConfig = require('tailwind-api-utils').loadConfig;
The library primarily uses ESM; CJS require is possible but less idiomatic for modern TypeScript/Node.js projects.
sortClassname
import { sortClassname } from 'tailwind-api-utils';
import sortClassname from 'tailwind-api-utils/sortClassname';
Functions are named exports from the main package entry point.
Config
import type { Config } from 'tailwind-api-utils';
Type imports should be used for better type-checking and bundle optimization.

Demonstrates loading a Tailwind CSS configuration and sorting a string of class names using the library's utilities, compatible with Tailwind CSS v3 and v4 configurations.

import { loadConfig, sortClassname } from 'tailwind-api-utils'; import path from 'path'; import process from 'process'; // A dummy Tailwind CSS configuration file content for demonstration const tailwindConfigFileContent = ` module.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [], }; `; async function runExample() { // In a real application, you would load your actual tailwind.config.js // For this example, we'll simulate a config file. // This path needs to be valid in the execution environment. const dummyConfigPath = path.join(process.cwd(), 'tailwind.config.js'); // You might write this content to a temporary file if truly testing `loadConfig` // For simplicity, `loadConfig` tries to find it, so ensuring it exists is key. try { // Load the Tailwind config. This will look for tailwind.config.js by default. // Make sure 'tailwindcss' is installed as a peer dependency. const config = await loadConfig({ configPath: dummyConfigPath }); console.log('Loaded Tailwind config:', config.theme.extend); const classesToSort = 'p-4 text-lg font-bold mx-auto flex items-center bg-blue-500 rounded-md'; const sortedClasses = sortClassname(classesToSort, config); console.log('Original classes:', classesToSort); console.log('Sorted classes:', sortedClasses); const v4Classes = 'group/item:hover:p-4 md:text-xl sm:flex-row'; const sortedV4Classes = sortClassname(v4Classes, config); console.log('Original v4 classes:', v4Classes); console.log('Sorted v4 classes (with v4 compatibility):', sortedV4Classes); } catch (error) { console.error('Failed to run example:', error); console.warn('Ensure `tailwindcss` is installed as a peer dependency.'); console.warn('For `loadConfig` to work, a `tailwind.config.js` file (or specified path) must be resolvable.'); } } runExample();
Debug
Known issues
gotchaThe `tailwind-api-utils` package is a peer dependency on `tailwindcss`. Ensure `tailwindcss` is installed in your project, compatible with the `^3.3.0 || ^4.0.0 || ^4.0.0-beta` range, otherwise the utilities will fail to function or load configurations correctly.
fix
Install `tailwindcss` in your project: `npm install tailwindcss` or `yarn add tailwindcss`.
affects: >=0.0.1
breakingVersion 1.0.0 introduced the `sortClassname` feature. While not a breaking change for existing functionality, users updating from pre-1.0.0 versions might not have been aware of this new core utility.
fix
No direct fix needed, but be aware of the new functionality and potential for code style enforcement if adopted.
affects: >=1.0.0
gotchaWhen using `loadConfig`, the function attempts to resolve `tailwind.config.js` relative to the current working directory or a specified `configPath`. If your configuration is not at a standard location or in a complex monorepo setup, you might need to explicitly provide the `configPath` option.
fix
Pass an explicit `configPath` option to `loadConfig({ configPath: './path/to/your/tailwind.config.js' })`.
affects: >=0.1.0
gotchaCompatibility with Tailwind CSS v4 is explicitly handled, including fixes for the use of the separator '-' with v4 configurations. Older versions of `tailwind-api-utils` might not correctly process v4 specific syntax or configurations.
fix
Upgrade to `tailwind-api-utils@1.0.3` or newer for robust Tailwind CSS v4 compatibility: `npm update tailwind-api-utils`.
affects: <1.0.3
Errors
Common errors & fixes
Error: Cannot find module 'tailwindcss'
The `tailwindcss` package is a peer dependency and was not installed in the project.
fix
Install Tailwind CSS: `npm install tailwindcss` or `yarn add tailwindcss`.
TypeError: Cannot read properties of undefined (reading 'theme')
The `loadConfig` function likely failed to load a valid Tailwind CSS configuration, resulting in an undefined or malformed config object.
fix
Ensure `tailwind.config.js` exists and is valid at the expected path, or provide an explicit `configPath` to `loadConfig`.
SyntaxError: Cannot use import statement outside a module
Attempting to use `import` syntax in a CommonJS (`.js` without `"type": "module"` in `package.json`) Node.js environment.
fix
Either convert your project to use ES Modules by adding `"type": "module"` to `package.json` or use dynamic `import()` or switch to `require()` if the library provides a CJS entry (though for `tailwind-api-utils`, ESM is preferred).
Upgrade
Version history
1.0.3latest on npm
Audit
Dependencies
tailwindcssrequiredRequired for accessing the Tailwind CSS API and configuration; it's a peer dependency.
Agent activity
2 hits · last 30 days
node
2
Resources
tailwind-api-utils — npm install tailwind-api-utils · libregistry