Use tailwind.config.js inside theme folder

Thank you, yanalshoubaki. The patch is working for me.

Could you please explain why you need this? There already is the option to specify a tailwind config file by using Tailwind's @config directive, you just need a single one-liner on top of your Tailwind file, e.g.

~/web/themes/custom/my_frontend_theme/my_tailwind_file.css

@config "tailwind.config.js"; /* <== add this on top of your file */

@tailwind base;
@tailwind components;
@tailwind utilities;

.my_custom_styles {
  /* ... */
}

The advantage of this method is that it is not hardcoded, e.g. people using an external style library could pull in stuff from other folders.

This feature when you don't want to use the output as file and just read it from the html, and this feature will be useful when you don't have style files that contain css or sass that used tailwindcss.

Ah, thanks for your feedback, I think I got.

But I'm still unsure if we can add this in the current form. If we merge this patch, we would loose the ability to use the @config directive inside a CSS input file. The hardcoded --config=theme_directory/tailwind.config.js from command line option would always overrule a @config "custom_tailwind.config.js" directive inside a CSS file.

I think i can add like a checkbox or like a condition if the user use @config directive inside the css file we will not use the tailwind.config.js on compile css, if not we will pass the tailwind config like the current request behavior.

If you agreed about this feature i can update the patch.

Thank you

I've been thinking about this, and I'm currently not planning to merge this.

First I really want to avoid any opinions on the file / directory structure in the module. Some themes might use a ./css subfolder, some themes might even reference and external designsystem completeley outside the theme path.

The 2nd thing is, the upcoming TailwindCSS v4 is planning a CSS-first configuration, which uses the CSS file also for configuration, instead of the tailwind.config.js file. So we might end up with a knob in the UI that is going to be deprecated (or at least not the recommended config method) in a few month.

Thanks for your contribution, I hope the module is still useful for your project.

Hi ibraheem,
thanks for your contribution. An UI input field for the tailwind.config.js would be nice and should work for all users. Just a few smaller things though:

1. We would need to separate config files, one for HTML requests and one for Ajax requests. So we can disable Tailwind's preflight for Ajax requests to reduce the weight of the injected CSS.
2. There is a typo in $form['tailwind_jit']['additinal_config']. Since we would need two inputs anyway, I would suggest somehint like $form['tailwind_jit']['ajax_config_file'] and $form['tailwind_jit']['html_config_file'] instead.
3. Could you please provide a MR instead on a patch file?

Thanks a lot

Hi Hudri,

Thank you for your feedback. I have made the necessary changes as requested:

I've separated the configuration files into two inputs: one for HTML requests ($form['tailwind_jit']['html_config_file']) and one for Ajax requests ($form['tailwind_jit']['ajax_config_file']). This should help with disabling Tailwind's preflight for Ajax requests, reducing the weight of the injected CSS.
I've created a merge request (MR) as per your suggestion, instead of providing a patch file.

Hi ibraheem,
I've added some comments in your commit in the issue fork, please see

https://git.drupalcode.org/issue/tailwind_jit-3450150/-/commit/ec8ef5363...