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.jsIn 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!Ā