Controlling Tailwindcss

Today I learned how to control Tailwindcss. I am planning on using Tailwindcss on an upcoming project and in order to put something new like this onto a production website, I need to understand it deeply.

Tailwindcss out of the box

/* input.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
};

# command
tailwind build input.css -o output.css

Putting the above together and running the command will output a css file that is 54309 lines of code and 854.59KB in file size! The developers talk about this on the official site and it is not the recommended way to use Tailwindcss. What I needed to know was what config settings could create a very minimal output that I could add to as I needed it.

Extreme - output no styles

// tailwind.config.js
module.exports = {
  corePlugins: [],
  theme: {},
  variants: {},
  plugins: []
};

The above config will output an empty css file.

tailwindcss 1.1.0

Building... input.css

Finished in 114 ms
Size: 0B
Saved to output.css

Good to know!

A more usable config

// tailwind.config.js
const colorOverrides = {
  red: "#de3618"
};
const customColors = {
  "dodger-blue": "#22a7f0"
};

module.exports = {
  corePlugins: ["container", "margin", "padding", "textColor"],
  theme: {
    colors: colorOverrides,
    screens: {
      sm: "420px",
      md: "600px"
    },
    fontFamily: {},
    borderWidth: {},
    spacing: {},
    opacity: {},
    extend: {
      colors: customColors,
      spacing: {
        gap: "20px"
      }
    }
  },
  variants: {
    container: ["responsive"],
    margin: [],
    padding: [],
    textColor: []
  },
  plugins: []
};

This config is contrived, but it is beginning to show the control the config has over the output css. It has default colour overrides, custom colours, whitelisting of Tailwindcss corePlugins, a custom spacing value, breakpoint overrides and responsive classes only for the container corePlugin.

More importantly, I have full control of the output css. Running the build command results in the output below. Knowing all this gives me the confidence to use this on a production site.

Example output

tailwindcss 1.1.0

Building... input.css

Finished in 157 ms
Size: 1.33KB
Saved to output.css

/* output.css */
.container {
  width: 100%
}

@media (min-width: 420px) {
  .container {
    max-width: 420px
  }
}

@media (min-width: 600px) {
  .container {
    max-width: 600px
  }
}

.m-auto {
  margin: auto
}

.m-gap {
  margin: 20px
}

.-m-gap {
  margin: -20px
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.my-gap {
  margin-top: 20px;
  margin-bottom: 20px
}

.mx-gap {
  margin-left: 20px;
  margin-right: 20px
}

.-my-gap {
  margin-top: -20px;
  margin-bottom: -20px
}

.-mx-gap {
  margin-left: -20px;
  margin-right: -20px
}

.mt-auto {
  margin-top: auto
}

.mr-auto {
  margin-right: auto
}

.mb-auto {
  margin-bottom: auto
}

.ml-auto {
  margin-left: auto
}

.mt-gap {
  margin-top: 20px
}

.mr-gap {
  margin-right: 20px
}

.mb-gap {
  margin-bottom: 20px
}

.ml-gap {
  margin-left: 20px
}

.-mt-gap {
  margin-top: -20px
}

.-mr-gap {
  margin-right: -20px
}

.-mb-gap {
  margin-bottom: -20px
}

.-ml-gap {
  margin-left: -20px
}

.p-gap {
  padding: 20px
}

.py-gap {
  padding-top: 20px;
  padding-bottom: 20px
}

.px-gap {
  padding-left: 20px;
  padding-right: 20px
}

.pt-gap {
  padding-top: 20px
}

.pr-gap {
  padding-right: 20px
}

.pb-gap {
  padding-bottom: 20px
}

.pl-gap {
  padding-left: 20px
}

.text-red {
  color: #de3618
}

.text-dodger-blue {
  color: #22a7f0
}

Update: 2020-01-28

I have spent a bit more time with Tailwindcss and have made some steps forward in understanding how to limit the CSS bundle that is generated. See my updated post, Tailwindcss configs.