Tailwind JIT

Provides Just-in-Time compilation of Tailwind CSS for Drupal themes.

Setup

1. Install and enable the module
2. Install Tailwind CSS
   • For production environments, or if NodeJS is not available on your server, download the standalone CLI build of Tailwind CSS.
   • If you are using composer on a Linux x64 system, you can download a patched version of the Tailwind CLI including postcss-nested and postcss-import with composer:
     composer require webtourismus/tailwindcss-cli
   • If NodeJS is available on your server, install Tailwind CSS using npm. (Not recommended because the standalone CLI is faster than npx.)
3. In your settings.php, create a variable named $settings['tailwind_jit_executable'], containing the path to the Tailwind executable:
   • If you installed the standalone CLI build, the path depends on the location to your downloaded binary and your OS:
     You must either provide an absolute path like
     $settings['tailwind_jit_executable'] = '/usr/bin/tailwindcss-macos-arm64';
     or a path relative to the DRUPAL_ROOT directory (usually /web), e.g.
     $settings['tailwind_jit_executable'] = '../vendor/bin/tailwindcss';
   • If you installed the NodeJS version, the path most likely will be
     $settings['tailwind_jit_executable'] = 'npx tailwindcss';
4. Go to the theme settings and activate the compiler:
   Appearance => Settings (of your theme) => Section "Tailwind CSS Just-in-time compilation"

Now when you visit your website, the uncompiled CSS input file will be dynamically replaced with a minified Tailwind CSS output. Only those styles that are actually used on a page are included in the output. The result is a perfectly minimized CSS for every single page of your website.

This module can not generate styles for blocks rendered by core's BigPipe module. It is recommended to disable BigPipe if you want to use this module.

FAQ

• Can I use arbitrary values like pt-[1.2345rem]?
  Yes.
• Does it work with Views paging or Ajax requests?
  Yes.
• Can I use it with Layout builder or Paragraphs module?
  Yes, CSS classes rendered by Twig templates will be detected automatically. With the help of an extra module that provides an UI to inject CSS classes (like e.g. Block class or Layout builder styles or Style options module) site builders can even style them on the fly in the admin UI .
• Can I use it with admin themes?
  Yes. I recommend the Field group module to easily finetune your UI without creating your own subtheme and without any custom code.
  Want two input fields in one line? Create a field group with those two fields below and inject grid grid-cols-2 on the parent container in the node form display.
• Is the compiled CSS cached?
  Yes. The best performance is achieved if core's "Internal Page Cache" module is enabled and used. If Internal page cache is not applicable, Tailwind JIT itself can optionally cache the compiled CSS in the database.
• Where do I put my tailwind.config.js and how do I configure the template file paths (the content: [] in the config file)?
  You don't need a tailwind.config.js, the module will automatically provide the current page's HTML as content to the compiler. If you need to add additional custom config, use Tailwind's @config directive inside your input CSS file.
  Note: If you use a custom config file, the content key will be ignored, this key will always be set by the module.
• Can I use multiple CSS input files or separate input files for individual Drupal libraries?
  No, not by library. By concept Tailwind CSS is designed to work with one CSS input file and will automatically create a purged, minimized CSS depending on page content. But is is possible to define a separate input file for Ajax requests, e.g. one without Tailwind's preflight styles.