Use tailwind.config.js inside theme folder

Created on 27 May 2024, about 1 month ago
Updated 3 June 2024, 26 days ago

This issue is for implement new feature where you can use custom properties from tailwind.config.js inside theme folder.

✨ Feature request
Status

Postponed

Version

1.0

Component

Code

Created by

πŸ‡―πŸ‡΄Jordan yanalshoubaki

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @yanalshoubaki
  • πŸ‡―πŸ‡΄Jordan hamzadwaya

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

  • Status changed to Needs review about 1 month ago
  • πŸ‡¦πŸ‡ΉAustria hudri Austria

    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.

  • πŸ‡―πŸ‡΄Jordan yanalshoubaki

    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.

  • πŸ‡¦πŸ‡ΉAustria hudri Austria

    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.

  • πŸ‡―πŸ‡΄Jordan yanalshoubaki

    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

  • πŸ‡¦πŸ‡ΉAustria hudri Austria

    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.

  • Status changed to Postponed 26 days ago
  • πŸ‡¦πŸ‡ΉAustria hudri Austria
Production build 0.69.0 2024