tailwindconfig.js

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');
const reduce = require('lodash/reduce');
const isString = require('lodash/isString');

function wrapUtilities(utilities) {
    // Hack to enable AutoCompletion on VSCode
    // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227#issuecomment-1139895799
    return reduce(
        utilities,
        (result, value, key) => {
            result[key] = value;

            if (isString(value)) {
                // Custom utility is a string of other utility classes so we'll display them as is
                result[`.${key}`] = {tw: value};
            } else {
                result[`.${key}`] = value;
            }
            return result;
        },
        {},
    );
}

module.exports = {
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    theme: {
    },
    plugins: [
        plugin(({addUtilities}) => {
            addUtilities(
                wrapUtilities({
                    // Image resize mode
                    'resize-cover': {resizeMode: 'cover'},
                    'resize-contain': {resizeMode: 'contain'},
                    'resize-stretch': {resizeMode: 'stretch'},
                    'resize-repeat': {resizeMode: 'repeat'},
                    'resize-center': {resizeMode: 'center'},

                    // Custom utilities
                    'absolute-fill': 'absolute top-0 left-0 right-0 bottom-0',
                }),
            );
        }),
    ],
};