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.

👉 Preflight - Tailwind CSS

{
	// 👇 Make sure TW only take effect on classes that are inside this class
	important: '.tw-custom',
	// 👇 Make sure there is no conflict with predefined classes
	prefix: 'tw-',
	corePlugins: {
		// 👇 Make sure we don't apply TW's preflight, especially useful when you use some
		// styling system that uses a different "normalize CSS" like TW's preflight. 
		// For example, Bootstrap.
    preflight: false
  }
}

In your project, ensure any component where you want to apply TW classes is placed under a .tw-custom class.

<!-- No effect -->
<div class="tw-p-4"></div>

<div class="tw-custom">
	<!-- TW takes effect -->
	<div class="tw-p-4"></div>
</div>

<aside> ☝ Remark: If you're using prefix: 'tw-' in the config file, don't forget to prefix your Tailwind classes with tw-.

</aside>

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](<https://github.com/necolas/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.

@tailwind base;
@tailwind components;
@tailwind utilities;

.tw-custom {
	// all in file preflight.css
}

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.

<div class="tw-custom">
	<!-- TW takes effect -->
	<div class="tw-p-4">
		<app-child>
			<!-- 
			🚨 TW preflight affects all the HTML components inside this component
			-->
		</app-child>
	</div>
</div>

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.

.tw-preflight {
	// all in file preflight.css
}

<div class="tw-ideta tw-preflight">
  <!-- 👇 Tw works -->
  <div class="tw-bg-red"></div> 

  <!-- 👇 TW's preflight will destroy the style of this child -->
  <app-child>
    <!-- Use bootstrap, no tailwind -->
  </app-child>
</div>

<div class="tw-ideta">
  <div class="tw-bg-red **tw-preflight**"></div>

  <app-child>
    <!-- Use bootstrap, no tailwind -->
  </app-child>
</div>

<aside> ☝ 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!

</aside>