Integrate Tailwind into the current project (case: using Bootstrap + Angular)

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

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

In tailwind.config.js

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

1<!-- No effect -->
2<div class="tw-p-4"></div>
3
4<div class="tw-custom">
5	<!-- TW takes effect -->
6	<div class="tw-p-4"></div>
7</div>

☝

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.

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5.tw-custom {
6	// all in file preflight.css
7}

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.

1<div class="tw-custom">
2	<!-- TW takes effect -->
3	<div class="tw-p-4">
4		<app-child>
5			<!-- 
6			🚨 TW preflight affects all the HTML components inside this component
7			-->
8		</app-child>
9	</div>
10</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.

1.tw-preflight {
2	// all in file preflight.css
3}

1<div class="tw-ideta tw-preflight">
2  <!-- 👇 Tw works -->
3  <div class="tw-bg-red"></div> 
4
5  <!-- 👇 TW's preflight will destroy the style of this child -->
6  <app-child>
7    <!-- Use bootstrap, no tailwind -->
8  </app-child>
9</div>

Problem

1<div class="tw-ideta">
2  <div class="tw-bg-red tw-preflight"></div>
3
4  <app-child>
5    <!-- Use bootstrap, no tailwind -->
6  </app-child>
7</div>

Solution

☝

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!