Setup Tailwind CSS

What does this MR do and why?

Related to gitlab-ui#2258 (closed)

Sets up Tailwind CSS for the Tailwind migration.

This introduces the groundwork for the Tailwind migration. This MR installs and configures Tailwind with a single core plugin (isolation).

What still needs to be done in this MR

• Maybe needed - update build tasks to include tailwindcss:build. According to https://github.com/rails/tailwindcss-rails?tab=readme-ov-file#building-for-production this might be done automatically but we should check.
• Update GDK commands to watch Tailwind. There are multiple ways this can be done. In the pairing we were using rails tailwindcss:watch but we should evaluate other options to see if they are better. This may need to be updated in a GDK MR but need to figure that out too.
• Look into how we change the input and output Tailwind file names. It would be nice to follow the same naming convention we currently have which would be application_utilities_tailwind.css
• [-] Remove gl-isolate and gl-isolation-isolate from GitLab UI and add isolation core plugin to corePlugins in tailwind.defaults.js. When that is merged update the @gitlab/ui package in this MR.
  • Note from @pgascouvaillancourt: I think this can be done after the fact.
• Look into making content key in tailwind.confg.js more specific to potentially speed up build

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

How to set up and validate locally

1. Run yarn to install the dependencies.
2. The Tailwind CSS bundle is built when you:
   1. Run the standalone script with yarn tailwindcss:build or bundle exec rake gitlab:assets:tailwind.
   2. Run Vite (gdk start vite).
   3. Run Webpack (gdk start webpack).
   4. Compile the production assets (bundle exec rake gitlab:assets:compile).
3. When testing any of the above, the app/assets/builds/tailwind.css bundle should be created with a single util (.gl-isolate).
4. When running Vite or Webpack, Tailwind watcher is enabled. To verify that it works:
   1. Open app/assets/javascripts/work_items/components/work_item_detail_modal.vue#124 and delete/rename gl-isolate.
   2. Restart Webpack/Vite. Okay that's weird. The thing is that the watcher never removes utils from the bundle, it only adds newly detected ones. So you must restart the dev server so that the Tailwind bundle is built from scratch once.
   3. At this point, app/assets/builds/tailwind.css should be empty.
   4. In app/assets/javascripts/work_items/components/work_item_detail_modal.vue#124, restore the gl-isolate class.
   5. app/assets/builds/tailwind.css should be updated automatically to include .gl-isolate again.