feat: set important: true

Author: cossssmin

README.md

@@ -50,6 +50,12 @@ The plugin is basically a custom Tailwind CSS config that changes utility classe
 
 Following is a list of the changes made to the default Tailwind CSS config.
 
+### important
+
+The `important` key is set to `true`.
+
+HTML emails often use inline CSS, so this ensures that any CSS generated by Tailwind uses `!important` to override inline styles (unless the inline styles themselves use `!important`).
+
 ### screens
 
 The `screens` config uses a desktop-first approach now:

src/index.js

@@ -3,6 +3,7 @@ const { disabledFilterPlugins, ...filterPlugins } = require('./filters')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  important: true,
   theme: {
     screens: {
       sm: {max: '600px'},

src/index.test.js

@@ -33,6 +33,7 @@ function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
   config = {
     ...{
       presets: [emailPreset],
+      important: false,
     },
     ...config,
   }