Tips when adding Tailwind to an existing project (Bootstrap, etc.)

Opting out from tailwind reset (preflight)

Begin, by opting out of Tailwind reset called "preflight" to avoid conflict with existing CSS resets (i.e. mordern-normalize) by setting preflight to false

tailwind.config.js


module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: false,
  corePlugins: {
    preflight: false // set preflight to false
  }, 
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Namespacing all tailwind classes with a prefix

Prefixing all tailwind classnames with a prefix (e.g tw-) helps prevent clashes with existing classnames

tailwind.config.js


module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: false,
  corePlugins: {
    preflight: false
  },
  prefix: 'tw-', // set prefix to 'tw-'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Example

<div class="bg-blue-500 h-40 w-40">
  ...
<div>

becomes

<div class="tw-bg-blue-500 tw-h-40 tw-w-40">
  ...
<div>

Increasing the specificity of tailwind classes

By nature tailwind classnames are low in specificity, so the chances of underlying CSS overriding it is very high. We are going to give more weight to our utilities by flagging them as !important in our config file.
Note ! Using !important is bad practice, but its important to know when to use it

tailwind.config.js


module.exports = {
  mode: 'jit',
  purge: [],
  darkMode: false,
  corePlugins: {
    preflight: false
  },
  prefix: 'tw-',
  important: true, // set important to true
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Refrences

• Adding Tailwind CSS to an Existing Project