Configuration TailwindCSS

tailwind-preset-one.js

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: "#000",
      white: "#fff",
      gray: colors.gray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue,
      lightBlue: colors.lightBlue,
      green: colors.emerald,
      primary: colors.blue,
      secondary: colors.blueGray
    },
    extend: {
      fontFamily: {
        sans: ["Ubuntu", ...defaultTheme.fontFamily.sans]
      }
    }
  },

  variants: {
    extend: {
      ringOpacity: ["dark"]
    }
  }
};

tailwind.config.js

module.exports = {
  purge: [
    "./storage/framework/views/*.php",
    "./resources/views/**/*.blade.php",
    "./resources/js/**/*.js",
    "./resources/js/**/*.jsx",
    "./resources/js/**/*.vue",
  ],

  darkMode: false, // or 'media' or 'class'
  presets: [require("./tailwind-preset-one")],

  theme: {
    extend: {}
  },

  variants: {
    extend: {
      opacity: ["disabled"],
      borderCollapse: ["hover", "focus"],
      backgroundColor: ["odd"]
    }
  },

  plugins: [require("@tailwindcss/forms")]
};