This note contains remarks for instances where the current project already uses another styling system or has predefined classes. It also includes remarks for projects that use Angular and Bootstrap.
In your project, ensure any component where you want to apply TW classes is placed under a
.tw-custom class.Remark: If you're using
prefix: 'tw-' in the config file, don't forget to prefix your Tailwind classes with tw-.Problems can arise if you're using both Bootstrap and Tailwind in the same project, or Tailwind with another styling system that employs a different "normalize" CSS.
Bootstrap uses
normalize.css, while Tailwind employs modern-normalize. The differences between these two cannot coexist in the same project.One solution is copy all inside the file
node_modules/tailwindcss/lib/css/preflight.css and put it under .tw-custom in your main css file.One disadvantage of this solution, when incorporated into an existing Angular project, is that you cannot integrate a predefined component (not using TW) inside a component that is already using TW. This is because the TW's preflight will reset all CSS within the predefined component.
Solution idea: Introduce
.tw-preflight to replace .tw-custom. To avoid Tailwind's preflight affecting an Angular child within a component, we would use .tw-preflight specifically on the HTML component where we want to apply Tailwind.Best Practice: Avoid using
tw-preflight unless you encounter an issue with the HTML component where you intend to apply the TW classes. Even better, design your component to not require preflight by default!