Merge pull request #944 from PaloAltoNetworks/frontend/remove-preflight

[WebUI] Remove Tailwind preflight styles

Author: blindaa121

docusaurus.config.ts

@@ -1,12 +1,12 @@
-import Mermaid from "@theme/Mermaid";
+import tailwindPlugin from "./plugins/tailwind-config.cjs";
 
 /**
  * Copyright (c) 2017-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-let baseUrl
+let baseUrl;
 if (process.env.CI_MERGE_REQUEST_IID) {
   if (process.env.CI_PROJECT_DIR == "dev") {
     baseUrl = "/";
@@ -1159,6 +1159,7 @@ const config = {
         gtm: "GTM-PLXD79N",
       },
     ],
+    tailwindPlugin,
   ],
   stylesheets: [
     {

package.json

@@ -71,7 +71,7 @@
     "slick-carousel": "^1.8.1",
     "stackdriver-errors-js": "^0.12.0",
     "tailwind-merge": "^3.2.0",
-    "tailwindcss": "^4.1.3",
+    "tailwindcss": "^4.1.10",
     "turndown": "^7.2.0"
   },
   "browserslist": {
@@ -87,9 +87,12 @@
     ]
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.21",
     "cross-env": "^7.0.3",
     "husky": "^8.0.2",
     "lint-staged": "^13.0.3",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
     "prettier": "2.7.1",
     "rimraf": "^3.0.2",
     "run-script-os": "^1.1.6",

plugins/tailwind-config.cjs

@@ -0,0 +1,15 @@
+function tailwindPlugin(context, options) {
+  return {
+    name: "tailwind-plugin",
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins = [
+        require("postcss-import"),
+        require("@tailwindcss/postcss"),
+        require("autoprefixer"),
+      ];
+      return postcssOptions;
+    },
+  };
+}
+
+module.exports = tailwindPlugin;

src/components/AceternityUI/PartnerTools.js

@@ -91,7 +91,10 @@ const Feature = ({ buttonClass, title, description, logo, index, cta }) => {
       <div className="flex justify-between mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
         <img style={{ width: "50px" }} src={logo} />
         <Link to={cta.src}>
-          <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none">
+          <button
+            className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none"
+            style={{ border: 0 }}
+          >
             <span className={buttonClass} />
             <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
               {cta.text}

src/components/AceternityUI/Tabs.js

@@ -58,6 +58,8 @@ export const Tabs = ({
               tabClassName
             )}
             style={{
+              backgroundColor: "transparent",
+              border: 0,
               transformStyle: "preserve-3d",
               "&:hover": { cursor: "pointer" },
             }}

src/css/custom.scss

@@ -11,15 +11,17 @@
  */
 /* You can override the default Infima variables here. */
 
-@use "tailwindcss";
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 // revert default list-style overridden by tailwindcss
-@layer base {
-  ul,
-  ol {
-    list-style: revert;
-  }
-}
+// @layer base {
+//   ul,
+//   ol {
+//     list-style: revert;
+//   }
+// }
 
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
 

tailwind.config.js

@@ -0,0 +1,29 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+    container: false,
+  },
+  darkMode: ["class", '[data-theme="dark"]'],
+  content: ["./src/**/*.{jsx,js,tsx,html}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Inter"', ...fontFamily.sans],
+        jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
+        mono: ['"Fira Code"', ...fontFamily.mono],
+      },
+      borderRadius: {
+        sm: "4px",
+      },
+      screens: {
+        sm: "0px",
+        lg: "997px",
+      },
+      colors: {},
+    },
+  },
+  plugins: [],
+};