load tailwindcss config function
npm install tailwindcss-configtailwindcss-configA lightweight utility for dynamically loading Tailwind CSS configuration files. It supports multiple formats and provides a seamless way to work with Tailwind configuration in your projects.
---
- Multi-format support: Handles .js, .cjs, .mjs, .ts, .cts, and .mts configuration files.
- Automatic discovery: Searches for configuration files in the current working directory or a specified path.
- Graceful fallback: Returns undefined if no configuration is found, ensuring compatibility with dynamic setups.
- TypeScript support: Fully typed for use in TypeScript projects.
---
Install the package via npm:
``bash`
npm i -D tailwindcss-config
Or using Yarn:
`bash`
yarn add -D tailwindcss-config
---
`typescript`
import { loadConfig } from 'tailwindcss-config'
#### 1. Default Usage
The function searches for Tailwind CSS configuration files in the current working directory:
`typescript`
(async () => {
const config = await loadConfig()
console.log(config)
})()
#### 2. Specify a Configuration File
Explicitly specify a path to a Tailwind CSS configuration file:
`typescript`
(async () => {
const config = await loadConfig({ config: './tailwind.config.ts' })
console.log(config)
})()
#### 3. Change the Working Directory
Set a custom working directory to search for Tailwind configuration files:
`typescript`
(async () => {
const config = await loadConfig({ cwd: '/my/project/directory' })
console.log(config)
})()
---
The utility supports the following file types:
- tailwind.config.js
-
-
-
-
-
Dynamic imports are powered by jiti, allowing the utility to handle various file types seamlessly.
---
#### Parameters
| Parameter | Type | Description | Default |
| ---------------- | ---------------------------- | ----------------------------------------------- | --------------- |
| options | Partial | Options to customize configuration loading. | {} |options.cwd
| | string | Directory to search for configuration files. | process.cwd() |options.config
| | string | Path to a specific Tailwind configuration file. | undefined |
#### Returns
A Promise that resolves to a Config object or undefined if no configuration file is found.
---
The utility uses lilconfig to locate configuration files. It searches for the following files (in order):
1. tailwind.config.js
2.
3.
4.
5.
6.
---
`plaintext`
my-project/
├── src/
│ └── index.ts
├── tailwind.config.ts
└── tailwind.config.js
`typescript`
(async () => {
const config = await loadConfig({ cwd: './my-project' })
console.log(config)
})()
---
The loadConfig function does not throw an error if no configuration is found. Instead, it resolves to undefined`. This ensures compatibility with projects where Tailwind configuration is optional or dynamically generated.
---
Contributions are welcome! To get started:
1. Fork this repository.
2. Create a new branch for your feature or bug fix.
3. Submit a pull request with a clear description of your changes.
---
This project is licensed under the MIT License.