Support async functions in tailwind.config

[sramam]

What version of Tailwind CSS are you using?

"tailwindcss": "3.3.3"

What build tool (or framework if it abstracts the build tool) are you using?

"next": "13.4.10",

What version of Node.js are you using?

❯ node -v
v18.13.0

What browser are you using?

chrome, NA

What operating system are you using?

macOS

Reproduction URL

https://github.com/sramam/zz-tailwind-config-async

Describe your issue
I need to load files and process in a tailwind plugin. The processing is an async operation
and, making the plugin an async function. tailwind.config.ts doesn't seem to like async functions.

The repo above provides the smallest reproduction I could make to illustrate the issue.

To reproduce:

git clone https://github.com/sramam/zz-tailwind-config-async
cd zz-tailwind-config-async
pnpm install
pnpm dev

visit https://localhost:3000

edit tailwind.config.ts Line 41:

-   theme: asyncTheme(),
+   theme: syncTheme(),

Notice the orange text background.

Desired Behavior

The async function not just for themes, but plugins and everywhere else, should work like the sync versions.

[RobinMalfait]

I'm going to move this issue to the ideas discussions page since it is currently not a bug.

We have to think about if we want to expose this behaviour at all or not, because making parts async in the config could lead to a lot of performance issues if we or our users aren't careful. E.g.: imagine somebody making an API call to fetch a value when you are using the bg-* utilities.

[sramam]

Interesting point.
But is that not a problem with sync functions too?

Currently, postcss processing is an async function. Loading a css file, processing it and using the
addBase method turned out to being a very difficult and painful exercise.

I landed up having to run spawn a worker in sync to process the file, serialize and deserialize the json object.
Surely this process takes longer than a natively supported async capability.

IMHO, this should be the responsibility of the developer.

Perhaps the framework could add some tracing for execution time by plugin, and optionally
dump that report to the console or a file to help debug any performance issues.

But now I feel I am asking for a mile, I only want the inch. :)

[adamwathan]

@sramam If you believe it's a really simple change to the codebase I think the best bet is to put together a pull request and we can discuss the changes more concretely there 👍 Right now I just think we're not sure what it would actually take or what challenges we'd run into, and figuring that out would take some time and the only way to know would be to actually try it, and we can't pause all of our other priorities to prioritize investigating that if that makes sense. So if you really want the feature and want to do the legwork of the initial investigation/proof-of-concept that would really speed up the process of deciding whether we want to make that change or not.

[sramam]

@adamwathan Thanks for responding.

I did not mean to imply it was a simple change.

I haven'r actually looked at the tailwind codebase - so feel very under qualified to propose code changes.
That said, I will dig in as time permits and if I can put together a PR, I most definitely will.

Not withstanding my complaint in the discussion above, tailwind has made working with styling a pleasure.
Thank you (and the rest of the team) for all your work.

[amirrezaDev1378]

Hi there,
Are there any updates on this?

[PwrSrg]

Bump - this is greatly needed.

[amirrezaDev1378]

I have created a package for this purpose:
https://github.com/amirrezaDev1378/tailwind-async-config

[jrcowan3]

do you have an example of this working on nextjs?

[amirrezaDev1378]

The repo has an example, and I believe it should work properly in Next.js because, after all, in any framework, under the hood is Tailwind and its JIT compiler.
Please try it, and if it does not work as expected, open an issue.
@jrcowan3

[amirrezaDev1378]

By the way, this is an example of using it (not Next.js):
https://github.com/amirrezaDev1378/tailwind-async-config/tree/master/example