DEV Community

Cover image for Tips when adding Tailwind to an existing project (Bootstrap, etc.)
Victor Nwanguma 👨‍🚀
Victor Nwanguma 👨‍🚀

Posted on

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Example

<div class="bg-blue-500 h-40 w-40">
  ...
<div>
Enter fullscreen mode Exit fullscreen mode

becomes

<div class="tw-bg-blue-500 tw-h-40 tw-w-40">
  ...
<div>
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

Refrences

Discussion (0)