From 2d0ac8058ab5e90afa6511e8bf8544b769abf981 Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Thu, 29 Sep 2022 12:03:54 +0630
Subject: [PATCH] Update Tailwind config to use only specific breakpoint and
 color palette

---
 tailwind.config.cjs | 84 +++++++++++++++++++++++++--------------------
 1 file changed, 47 insertions(+), 37 deletions(-)

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 7df50dd..5020a65 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,45 +12,55 @@ function withOpacity(variableName) {
 module.exports = {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {
-      textColor: {
-        skin: {
-          base: withOpacity("--color-text-base"),
-          accent: withOpacity("--color-accent"),
-          inverted: withOpacity("--color-fill"),
-        },
-      },
-      backgroundColor: {
-        skin: {
-          fill: withOpacity("--color-fill"),
-          accent: withOpacity("--color-accent"),
-          inverted: withOpacity("--color-text-base"),
-          card: withOpacity("--color-card"),
-          "card-muted": withOpacity("--color-card-muted"),
-        },
-      },
-      outlineColor: {
-        skin: {
-          fill: withOpacity("--color-accent"),
-        },
-      },
-      borderColor: {
-        skin: {
-          line: withOpacity("--color-border"),
-          fill: withOpacity("--color-text-base"),
-          accent: withOpacity("--color-accent"),
-        },
-      },
-      fill: {
-        skin: {
-          base: withOpacity("--color-text-base"),
-          accent: withOpacity("--color-accent"),
-        },
-      },
-      fontFamily: {
-        mono: ["IBM Plex Mono", "monospace"],
+    // Remove the following screen breakpoint or add other breakpoints
+    // if one breakpoint is not enough for you
+    screens: {
+      sm: "640px",
+    },
+
+    // Uncomment the following extend
+    // if existing Tailwind color palette will be used
+
+    // extend: {
+    textColor: {
+      skin: {
+        base: withOpacity("--color-text-base"),
+        accent: withOpacity("--color-accent"),
+        inverted: withOpacity("--color-fill"),
       },
     },
+    backgroundColor: {
+      skin: {
+        fill: withOpacity("--color-fill"),
+        accent: withOpacity("--color-accent"),
+        inverted: withOpacity("--color-text-base"),
+        card: withOpacity("--color-card"),
+        "card-muted": withOpacity("--color-card-muted"),
+      },
+    },
+    outlineColor: {
+      skin: {
+        fill: withOpacity("--color-accent"),
+      },
+    },
+    borderColor: {
+      skin: {
+        line: withOpacity("--color-border"),
+        fill: withOpacity("--color-text-base"),
+        accent: withOpacity("--color-accent"),
+      },
+    },
+    fill: {
+      skin: {
+        base: withOpacity("--color-text-base"),
+        accent: withOpacity("--color-accent"),
+      },
+      transparent: "transparent",
+    },
+    fontFamily: {
+      mono: ["IBM Plex Mono", "monospace"],
+    },
+    // },
   },
   plugins: [require("@tailwindcss/typography")],
 };