Outsource custom Tailwind CSS config

Through customizations on a Tailwind CSS config, the tailwind.config.js file can get long and overloaded. The following examples show a simple approach to split the config into manageable files with the use of reusable modules.

Example 1

For this example some custom colors are defined in the tailwind.config.js file. The goal is to outsource all values of the colors key to a separate file.

// tailwind.config.jsconst plugin = require('tailwindcss/plugin');module.exports = {  content: ["./**/*.{html,js}"],  theme: {    extend: {      colors: {        'sun': '#EBB02D',        'cafe': '#482121',        'forrest': '#617A55',        'ocean': '#00235B',        'fire': '#E21818'      }    },  },  plugins: [    plugin(      function({ addBase }) {        addBase({          '.text-disco': {            'color': '#9336B4'          }        })      }    )  ]}

We copy the color values into a new file and define them as module. For this demo the file is called tailwind.config.extendColors.js and placed where the tailwind.config.js file exists.

// tailwind.config.extendColors.jsmodule.exports = {  'sun': '#EBB02D',  'cafe': '#482121',  'forrest': '#617A55',  'ocean': '#00235B',  'fire': '#E21818'}

The outsourced config gets included back into the Tailwind CSS configuration by the require() method, that is supported in Node.js. The required module is stored in the extendColors variable. The variable replaces the color values, that we've outsourced previously.

// tailwind.config.jsconst plugin = require('tailwindcss/plugin');const extendColors = require('./tailwind.config.extendColors');module.exports = {  content: ["./**/*.{html,js}"],  theme: {    extend: {      colors: extendColors    }  },  plugins: [    plugin(      function({ addBase }) {        addBase({          '.text-disco': {            'color': '#9336B4'          }        })      }    )  ]}

Example 2

The second example goes on with the custom Tailwind CSS plugin, that is also part of the tailwind.config.js file.

// tailwind.config.jsconst plugin = require('tailwindcss/plugin');const extendColors = require('./tailwind.config.extendColors');module.exports = {  content: ["./**/*.{html,js}"],  theme: {    extend: {      colors: extendColors    }  },  plugins: [    plugin(      function({ addBase }) {        addBase({          '.text-disco': {            'color': '#9336B4'          }        })      }    )  ]}

Like in the first example, the code of the Tailwind CSS plugin gets copied into a new file. As Tailwind CSS plugins need the plugin() method, we first have to require it from tailwindcss/plugin. Now the plugin can even be defined as module. The file in this demo is called tailwind.config.customPlugin.js and placed where the tailwind.config.js file exists.

// tailwind.config.customPlugin.js const plugin = require('tailwindcss/plugin');module.exports = plugin(  function({ addBase }) {    addBase({      '.text-disco': {        'color': '#9336B4'      }    })  })

The last step is to require the outsourced plugin into the tailwind.config.js file back again. Therefore we require it and store into a variable, that replaces the plugin in the config.

// tailwind.config.jsconst plugin = require('tailwindcss/plugin');const extendColors = require('./tailwind.config.extendColors');const customPlugin = require('./tailwind.config.customPlugin');module.exports = {  content: ["./**/*.{html,js}"],  theme: {    extend: {      colors: extendColors    }  },  plugins: [    customPlugin  ]}