Every Build Takes 5 - 15 sec

[sadeghbarati]

@adamwathan Hey

I just here to thanks for TailwindCSS

and ask about TailwindCSS Build time with these tools I test with:

1. postCSS
2. Laravel Mix
3. Gulp

---

here is my tailwind.config.js

module.exports = {
  prefix: "",
  important: false,
  separator: ":",
  theme: {
    customForms: theme => ({
      default: { 
        'input, textarea, multiselect, select': {
          borderColor: theme('colors.primary'),
          backgroundColor: theme('colors.secondary'),
          color: theme('colors.black'),
          
        },
        'radio, checkbox' : {
          borderColor: theme('colors.primary'),
          backgroundColor: theme('colors.secondary'),
          color: theme('colors.primary')
        },
        'input, textarea, multiselect, select, radio, checkbox': {
          '&:not(.disabled):not(:disabled):focus': {
            borderColor: theme('colors.primary'),
            boxShadow: theme('colors.shadow'),
          }
        },
        'multiselect, select': {
          paddingTop: '0.5rem',
          paddingRight: '0.75rem',
          paddingBottom: '0.5rem',
          paddingLeft: '0.75rem'
        }
      },
    }),
    extend: {
      borderColor: {
        secondary: 'var(--color-secondary)',
        'secondary-light': 'var(--color-secondary-light)',
        'secondary-lighter': 'var(--color-secondary-lighter)',
        'secondary-dark': 'var(--color-secondary-dark)',
        'secondary-darker': 'var(--color-secondary-darker)',

        'primary-lighter': 'var(--color-primary-lighter)',
        'primary-light': 'var(--color-primary-light)',
        primary: 'var(--color-primary)',
        'primary-dark': 'var(--color-primary-dark)',
        'primary-darker': 'var(--color-primary-darker)',

        'accent-lighter': 'var(--color-accent-lighter)',
        'accent-light': 'var(--color-accent-light)',
        accent: 'var(--color-accent)',
        'accent-dark': 'var(--color-accent-dark)',
        'accent-darker': 'var(--color-accent-darker)',

        'success-lighter': 'var(--color-success-lighter)',
        'success-light': 'var(--color-success-light)',
        success: 'var(--color-success)',
        'success-dark': 'var(--color-success-dark)',
        'success-darker': 'var(--color-success-darker)',

        'warning-lighter': 'var(--color-warning-lighter)',
        'warning-light': 'var(--color-warning-light)',
        warning: 'var(--color-warning)',
        'warning-dark': 'var(--color-warning-dark)',
        'warning-darker': 'var(--color-warning-darker)',
      },
      colors: {
        background: {
          primary: 'var(--bg-primary)',
          secondary: 'var(--bg-secondary)',
          'secondary-hover': 'var(--bg-secondary-hover)',
          tertiary: 'var(--bg-tertiary)',
        },

        body: 'var(--color-bg)',
        secondary: 'var(--color-secondary)',
        'secondary-light': 'var(--color-secondary-light)',
        'secondary-lighter': 'var(--color-secondary-lighter)',
        'secondary-dark': 'var(--color-secondary-dark)',
        'secondary-darker': 'var(--color-secondary-darker)',

        shadow: 'var(--box-shadow)',
        transparent: 'transparent',
        black: 'var(--text-black)',
        white: 'var(--text-white)',

        'primary-lighter': 'var(--color-primary-lighter)',
        'primary-light': 'var(--color-primary-light)',
        primary: 'var(--color-primary)',
        'primary-dark': 'var(--color-primary-dark)',
        'primary-darker': 'var(--color-primary-darker)',

        'accent-lighter': 'var(--color-accent-lighter)',
        'accent-light': 'var(--color-accent-light)',
        accent: 'var(--color-accent)',
        'accent-dark': 'var(--color-accent-dark)',
        'accent-darker': 'var(--color-accent-darker)',

        'success-lighter': 'var(--color-success-lighter)',
        'success-light': 'var(--color-success-light)',
        success: 'var(--color-success)',
        'success-dark': 'var(--color-success-dark)',
        'success-darker': 'var(--color-success-darker)',

        'warning-lighter': 'var(--color-warning-lighter)',
        'warning-light': 'var(--color-warning-light)',
        warning: 'var(--color-warning)',
        'warning-dark': 'var(--color-warning-dark)',
        'warning-darker': 'var(--color-warning-darker)',
      },
    },
    spacing: {
      px: "1px",
      "0": "0",
      "4": "0.25rem",
      "8": "0.5rem",
      "12": "0.75rem",
      "16": "1rem",
      "24": "1.5rem",
      "32": "2rem",
      "40": "2.5rem",
      "48": "3rem",
    },
    borderWidth: {
      default: "0.0625rem",
      "0": "0",
      "2": "0.125rem",
      "4": "0.25rem",
      "8": ".5rem"
    },
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      default: '0.25rem',
      'md': '0.375rem',
      'lg': '0.5rem',
      'xl': '2rem',
      'full': '50%',
    },
    width: {
      auto: "auto",
      "1/2": "50%",
      "1/3": "33.33333%",
      "2/3": "66.66667%",
      "1/4": "25%",
      "3/4": "75%",
      "1/5": "20%",
      "2/5": "40%",
      "3/5": "60%",
      "4/5": "80%",
      full: "100%",
      screen: "100vw"
    },
    height:{
      auto: "auto",
      full: "100%",
      screen: "100vh"
    },
    minWidth: {
      "0": "0",
      full: "100%"
    },
    minHeight: {
      "0": "0",
      full: "100%",
      screen: "100vh"
    },
    maxWidth: {
      full: "100%",
      half: "50%",
      "90": "90%",
      "85": "85%",
      "80": "80%",
      "75": "75%",
      "60": "60%",
      "40": "40%",
    },
    maxHeight: {
      full: "100%",
      screen: "100vh"
    },
    lineHeight: {
      none: 1,
      lg: 1.5,
      xl: 1.618,
      xxl: 2
    },
    cursor: {
      auto: "auto",
      default: "default",
      pointer: "pointer",
      wait: "wait",
      move: "move",
      "not-allowed": "not-allowed"
    },
    flex: {
      "1": "1 0 auto",
      auto: "1 1 auto",
      initial: "0 1 auto",
      none: "none"
    },
    flexGrow: {
      "0": 0,
      default: 1
    },
    flexShrink: {
      "0": 0,
      default: 1
    },
    opacity: {
      "0": "0",
      "25": ".25",
      "50": ".5",
      "75": ".75",
      "100": "1"
    },
    zIndex: {
      "0": 0,
      "10": 10,
    },
    screens: {
      sm: "36em",
      md: "48em",
      lg: "62em",
      xl: "76.625em",
    },
  },
  variants: {
    margin: ["responsive"],
    padding: ["responsive"],
    textColor: [],
    textAlign: [],
    borderWidth: [],
    inset: [],
    borderColor: [],
    borderRadius: [],
    backgroundColor: [],
    display: ["responsive"],
    visibility: ["responsive"],
    flexDirection: [],
    flexWrap: ["responsive"],
    alignItems: ["responsive"],
    alignSelf: [],
    justifyContent: ["responsive"],
    alignContent: [],
    flex: ["responsive"],
    flexGrow: [],
    flexShrink: [],
    fontSize: [],
    lineHeight: [],
    cursor: [],
    userSelect: [],
    opacity: [],
    pointerEvents: [],
    zIndex: [],
    whitespace: [],
    width: [],
    height: [],
    maxHeight: [],
    maxWidth: [],
    minHeight: [],
    minWidth: [],
  },
  corePlugins: {
    divideOpacity: false,
    divideColor: false,
    backgroundOpacity: false,
    container: false,
    float: false,
    textDecoration: false,
    wordBreak: false,
    verticalAlign: false,
    textTransform: false,
    textOpacity: false,
    placeholderColor: false,
    placeholderOpacity: false,
    backgroundAttachment: false,
    transformOrigin: false,
    skew: false,
    fontWeight: false,
    listStylePosition: false,
    listStyleType: false,
    letterSpacing: false,
    fontStyle: false,
    backgroundRepeat: false,
    borderCollapse: false,
    tableLayout: false,
    rotate: false,
    fill: false,
    stroke: false,
    strokeWidth: false,
    accessibility: false,
  },
  plugins: [
    //require('tailwindcss-dir')(),
    require('@tailwindcss/ui'),
  ]
};

---

with these options that most of the options are falsy build time is 5 - 7 sec

---

My tailwindCSS config is huge but its default tailwind config. If I use all options build time increase up to 7 - 20 sec in every file save

#443

#1620

#1514

please show us the best way to use tailwindCSS with:

PostCSS ?

Gulp ?

Grunt ?

Webpack ?

Rollup ?

Laravel Mix ?

[estevanmaito]

As this is the same problem as #1514 I commented there with a possible solution.

[sadeghbarati]

@estevanmaito
Can i see your laravel-mix project

I use previous version of laravel-mix and update it to 6.0.0-alpha.1 and
I run same package.json script with cross-env but i got this error

webpack: TypeError: compiler.plugin is not a function

[sadeghbarati]

It was error with scripts and can't compile it :"(

Fast with tailwind thanks