Thi's avatar
HomeAboutNotesBlogTopicsToolsReading
About|My sketches |Cooking |Cafe icon Support Thi
💌 [email protected]

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

Anh-Thi Dinh
Web DevAngular
Left aside
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
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!
 
About|My sketches |Cooking |Cafe icon Support Thi
💌 [email protected]
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
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>
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5.tw-custom {
6	// all in file preflight.css
7}
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>
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