From 4fc6e22f29eb4734af605644f61770934a81677b Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Mon, 15 Jul 2024 15:57:24 +0300
Subject: [PATCH] feat: set `important: true`

---
 README.md         | 6 ++++++
 src/index.js      | 1 +
 src/index.test.js | 1 +
 3 files changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 10ee6c6..e39c791 100644
--- a/README.md
+++ b/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:
diff --git a/src/index.js b/src/index.js
index 1cb7066..70e2da4 100644
--- a/src/index.js
+++ b/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'},
diff --git a/src/index.test.js b/src/index.test.js
index b921c5f..4734686 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -33,6 +33,7 @@ function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
   config = {
     ...{
       presets: [emailPreset],
+      important: false,
     },
     ...config,
   }