Scope tailwind reset

Author: mellson

package.json

@@ -50,6 +50,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-scoped-preflight": "^2.0.2",
     "typecheck": "^0.1.2",
     "xstate": "^4.37.2"
   },

src/pages/index.tsx

@@ -8,6 +8,7 @@ import { Navbar } from '../components/landing/Navbar';
 import { Testimonials } from '../components/landing/Testimonials';
 import '../css/landing-page.css';
 import '../css/landing-styles.css';
+// import '../css/preflight.css';
 
 export default function Index() {
   useEffect(() => {
@@ -72,10 +73,10 @@ export default function Index() {
           src="https://plausible.io/js/script.tagged-events.js"
         ></script>
       </Head>
-      <header className="bg-blue-950/20 border-b-white/[0.08] border-b fixed w-full z-10 backdrop-blur-md">
+      <header className="bg-blue-950/20 border-b-white/[0.08] border-b fixed w-full z-10 backdrop-blur-md twp">
         <Navbar />
       </header>
-      <main className="bg-blue-950">
+      <main className="bg-blue-950 twp">
         <Intro />
         <Benefits />
         <Testimonials />

tailwind.config.js

@@ -1,3 +1,5 @@
+const { scopedPreflightStyles } = require('tailwindcss-scoped-preflight');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
@@ -26,82 +28,87 @@ module.exports = {
           900: '#15151d',
         },
         blue: {
-          50: "#e6f2fe",
-          100: "#cee6fa",
-          200: "#aed5fa",
-          300: "#90c7fc",
-          400: "#63a3fc",
-          500: "#0f6ee5",
-          600: "#005cde",
-          700: "#2949a5",
-          800: "#19296e",
+          50: '#e6f2fe',
+          100: '#cee6fa',
+          200: '#aed5fa',
+          300: '#90c7fc',
+          400: '#63a3fc',
+          500: '#0f6ee5',
+          600: '#005cde',
+          700: '#2949a5',
+          800: '#19296e',
           850: '#102157',
-          900: "#0c1238",
-          950: '#000622'
+          900: '#0c1238',
+          950: '#000622',
         },
         pink: {
-          50: "#ffeafe",
-          100: "#fdd7fd",
-          200: "#fbbdf8",
-          300: "#fca5ef",
-          400: "#f571d3",
-          500: "#cf249b",
-          600: "#bd0c8b",
-          700: "#95146b",
-          800: "#5d0843",
-          900: "#310121"
+          50: '#ffeafe',
+          100: '#fdd7fd',
+          200: '#fbbdf8',
+          300: '#fca5ef',
+          400: '#f571d3',
+          500: '#cf249b',
+          600: '#bd0c8b',
+          700: '#95146b',
+          800: '#5d0843',
+          900: '#310121',
         },
         orange: {
-          50: "#ffeed3",
-          100: "#ffdeae",
-          200: "#ffc77a",
-          300: "#ffb255",
-          400: "#f18622",
-          500: "#c14f0f",
-          600: "#af4108",
-          700: "#8a3500",
-          800: "#561e00",
-          900: "#2c0c00"
+          50: '#ffeed3',
+          100: '#ffdeae',
+          200: '#ffc77a',
+          300: '#ffb255',
+          400: '#f18622',
+          500: '#c14f0f',
+          600: '#af4108',
+          700: '#8a3500',
+          800: '#561e00',
+          900: '#2c0c00',
         },
         green: {
-          50: "#e2f7d8",
-          100: "#c9edbc",
-         200: "#a8df97",
-         300: "#8ad47b",
-         400: "#54b559",
-         500: "#29833b",
-         600: "#0f7528",
-         700: "#265a2f",
-         800: "#14371c",
-         900: "#071a0c"
+          50: '#e2f7d8',
+          100: '#c9edbc',
+          200: '#a8df97',
+          300: '#8ad47b',
+          400: '#54b559',
+          500: '#29833b',
+          600: '#0f7528',
+          700: '#265a2f',
+          800: '#14371c',
+          900: '#071a0c',
         },
         purple: {
-          50: "#f9ecfe",
-          100: "#edddfb",
-          200: "#dac9f7",
-          300: "#cfb7f6",
-          400: "#b092ee",
-          500: "#8355e5",
-          600: "#7245dc",
-          700: "#5c31b9",
-          800: "#341c79",
-          900: "#180b3f"
+          50: '#f9ecfe',
+          100: '#edddfb',
+          200: '#dac9f7',
+          300: '#cfb7f6',
+          400: '#b092ee',
+          500: '#8355e5',
+          600: '#7245dc',
+          700: '#5c31b9',
+          800: '#341c79',
+          900: '#180b3f',
         },
         teal: {
-          50: "#e1f4f6",
-          100: "#c3eaee",
-         200: "#99dce7",
-         300: "#86cdd9",
-         400: "#48afc2",
-         500: "#227c93",
-         600: "#166d8b",
-         700: "#1c5572",
-         800: "#103348",
-         900: "#061724"
-        }
+          50: '#e1f4f6',
+          100: '#c3eaee',
+          200: '#99dce7',
+          300: '#86cdd9',
+          400: '#48afc2',
+          500: '#227c93',
+          600: '#166d8b',
+          700: '#1c5572',
+          800: '#103348',
+          900: '#061724',
+        },
       },
     },
-    
   },
-  plugins: [],
+  corePlugins: { preflight: false },
+  plugins: [
+    scopedPreflightStyles({
+      cssSelector: '.twp', // or .tailwind-preflight or even [data-twp=true] - any valid CSS selector of your choice
+      mode: 'matched only', // it's the default
+    }),
+  ],
 };

yarn.lock

@@ -8560,6 +8560,11 @@ svgo@^2.7.0, svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+tailwindcss-scoped-preflight@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss-scoped-preflight/-/tailwindcss-scoped-preflight-2.0.2.tgz#aeca934fb0981040f81cddabbb2405e20dc8423a"
+  integrity sha512-R306riOQ9lzP0uRfthR8v7Fv0GH4guqZmA8l4Y5Iyt/Bhbmyk2Ze4c27LyNljkaItFXAs+/rDAAULa/aZnqcqw==
+
 tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"