Use an async function as Tailwind CSS config
npm install tailwind-async-config
Create a file to wrap your async function
const MyAsyncConfig = async () => {
// Simulate an async operation
await fetch('https://jsonplaceholder.typicode.com/todos/1')
return {
extend: {
colors: {
'primary': '#FF6363'
}
}
}
}
module.exports = MyAsyncConfig;
Use your file in your tailwind.config.js
const TailwindAsyncConfig = require("tailwind-async-config").default;
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["index.html"],
theme: TailwindAsyncConfig({
configPath: "./my-async-config.js",
useBun: false,
}),
plugins: [],
}
If you are using Bun, you must set the useBun option to true, and you must use es module in your async config file.
now you can run your project
npx tailwindcss -i ./src/styles.css -o ./dist/styles.css
there is an example at example
Name | Default | Description |
---|---|---|
configPath | - | Path to your async config e.g. "my-async-config.js" |
useBun | false | Whether to use Bun or not, if you are using typescript or es module you must set this option to true |