const plugin = require("tailwindcss/plugin");

module.exports = {
  purge: {
    content: ["./src/main/webapp/**/*.jsp", "./src/main/webapp/**/*.tag", "./src/main/javascript/**/*.js"],
  },
  // use a prefix to not conflict with bootstrap
  prefix: "tw-",
  // use important keyword for tailwind utility classes to override bootstrap selectors
  important: true,
  corePlugins: {
    // disable tailwind base/reset styles. we're still using bootstrap
    preflight: false,
  },
  theme: {
    extend: {
      screens: {
        print: { raw: "print" },
      },
      lineHeight: {
        normal: "normal",
      },
      fontSize: {
        "10rem": "10rem",
      },
    },
  },
  variants: {
    boxShadow: ["responsive", "hover", "focus", "focus-within"],
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const printStyles = {
        ".no-break-inside": {
          "break-inside": "avoid",
        },
        ".no-page-break-inside": {
          "break-inside": "avoid-page",
        },
        ".no-col-break-inside": {
          "break-inside": "avoid-column",
        },
      };
      addUtilities(printStyles, ["responsive"]);
    }),
  ],
};

@@ -1,12 +1,75 @@
+const defaultConfig = require(%22tailwindcss/defaultConfig.js%22);%0A
 const plugin
@@ -733,16 +733,217 @@
 %0A    %7D,%0A
+    screens: %7B%0A      // cannot use 'extend' as %60xs%60 would override other screens%0A      // since it's added to the bottom of the css file%0A      xs: %22480px%22,%0A      ...defaultConfig.theme.screens,%0A    %7D,%0A
   %7D,%0A  v

add tailwind screen xs configuration