[CSS Utilities WG] Tailwind Integration > Iteration 1 > Migrate a single SCSS utility file

Background

To better evaluate what it will take for us to migrate our custom CSS utils library to Tailwind, we would like to migrate a single SCSS utility file. This will let us create the basic Tailwind setup and get a better of sense of how migrating the more complicated files will go.

Proposal

In gitlab#439096 we have a table that lists each SCSS utility file and how many classes need to be migrated. isolation.scss only has 1 utility class that needs to be migrated so let's start with that one to keep it really simple.

Implementation guide

1. Install Rails Tailwind in gitlab-org/gitlab
2. Add a tailwind.config.js that uses the tailwind.defaults.js preset
3. Define the content attribute in tailwind.config.js. Content should point to:
   • ./app/**/*.{vue,js,html.haml,rb}
   • @gitlab/ui/src/**/*.{vue,js}
4. Change the generated app/assets/stylesheets/application.tailwind.css to app/assets/stylesheets/application_utilities_tailwind.css
5. Add a stylesheet_link_tag('application_utilities_tailwind.css) call to app/views/layouts/_head.html.haml
6. Add isolation to corePlugins array in tailwind.defaults.js preset
7. Remove isolation.scss