Adding Tailwind CSS to an existing project
Tailwind's configuration file also makes it easy to add it to an existing codebase, whether it uses custom CSS or another CSS framework.
You can opt-out of Tailwind's CSS reset and normalisation by adding corePlugins: { preflight: false } to tailwind.config.js, and if you have duplicate classes with existing classes and Tailwind-generated ones, you can add prefix: 'tw-' to prefix all of Tailwind's class names and avoid the conflicts.
If you need to deal with specificity, you can mark Tailwind-generated classes as important by adding important: true so that they can override any existing styling. You can do the same in HTML code by prefixing a class name with an exclamation mark - e.g. !flex.
Or, if you know that your Tailwind styles will only be used within a certain element, like #app, instead of making all classes important, by adding important: "#app" to the configuration, Tailwind classes will be prefixed with that selector - making them more specific.
Once these options are set, you can start using Tailwind without affecting the existing styles.
Doing this, and starting small by using a small number of utilities can be a good step towards migrating an existing codebase to use Tailwind and removing the existing styles at a later date.
- Oliver
P.S. There's less than a year until Drupal 7's end-of-life date. Plan your upgrade to Drupal 10 now!
