tailwindcss-config v1.0.15

Install

#yarn
yarn add tailwind-config

#npm
npm install tailwind-config

Use

const { tailwindcssConfig } = require("tailwindcss-config");

// previously imported in your styles
const config = {
  fonts: {
    sans: ["Montserrat"],
    serif: ["Storybook"],
    mono: ["Consolas"],
  },
  plugins: [require("tailwindcss/typography")],
  purge: {},
};

const tailwind = tailwindcssConfig(config);

module.exports = tailwind;

/**
 * Create webpack plugin instance of tailwindcss
 * @param {TailwindcssConfig} config
 */
export function tailwindcssWebpack(config: TailwindcssConfig): any {
  return {
    test: /\.scss$/,
    loader: "postcss-loader",
    options: {
      ident: "postcss",
      syntax: "postcss-scss",
      plugins: () => [
        require("tailwindcss")(tailwindcssConfig(config)),
        require("autoprefixer"),
      ],
    },
  };
}

/**
 *  Creates a Tailwindcss config with params
 * @param {TailwindcssConfig} config
 * @returns Custom tailwind.config object
 */
export function tailwindcssConfig(
  config: TailwindcssConfig = defaultConfig
): any {
  return {
    ...config.purge,
    theme: {
      screens: {
        "2xl": "1630px",
      },
      colors: {
        theme: {
          primary: "var(--primary)",
          secondary: "var(--secondary)",
          accent: "var(--accent)",
          border: "var(--border)",
          background: "var(--bg)",
          text: "var(--text)",
          success: "var(--success)",
          error: "var(--error)",
        },
      },
      spacing: {
        "69": "17rem",
        "72": "18rem",
        "80": "20rem",
        "86": "21rem",
        "94": "22rem",
        "108": "28rem",
        "116": "32rem",
        "128": "36rem",
        "256": "44rem",
        "512": "60rem",
      },
      boxShadow: {
        "3xl": "0 40px 75px -20px rgba(0, 0, 0, 0.34)",
        "4xl": "0 65px 100px -32px rgba(0, 0, 0, 0.5)",
        "5xl": "0 90px 130px -45px rgba(0, 0, 0, 0.8)",
        "material-sm": "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
        "material-md": "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
        "material-lg":
          "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
        "material-xl":
          "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
        "material-2xl":
          "0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
      },
      fontFamily: config.fonts,
      transitionTimingFunction: {
        material: "cubic-bezier(.25,.8,.25,1)",
      },
    },
    plugins: [...config.plugins],
  }
}