Text Shadow Plugin for Tailwind CSS

readme.md

Tailwind CSS text-shadow Plugin

This plugin adds some utility classes for the text-shadow css property.

Examples

Default

<h1 class="text-shadow">Example</h1>

* {
    --tw-text-shadow-opacity: 0;
    --tw-text-shadow-color: rgba(0, 0, 0, var(--tw-text-shadow-opacity));
    --tw-text-shadow: 0.1rem 0.1rem 0.5rem var(--tw-text-shadow-color);
}

.text-shadow {
    --tw-text-shadow-color: currentColor;
    --tw-text-shadow: 0.1rem 0.1rem 0.5rem var(--tw-text-shadow-opacity);
    text-shadow: var(--tw-text-shadow);
}

Change Color

<h1 class="text-shadow-blue-600">Example</h1>

.text-shadow-blue-600 {
    --tw-text-shadow-opacity: 1;
    --tw-text-shadow-color: rgba(37, 99, 235, var(--tw-text-shadow-opacity));
    text-shadow: var(--tw-text-shadow);
}

Change Color Opacity

<h1 class="text-shadow-50">Example</h1>

.text-shadow-50 {
    --tw-text-shadow-opacity: 0.5;
}

tailwind.config.js

// tailwind.config.js

const _ = require('lodash')
const plugin = require('tailwindcss/plugin');

const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
const nameClass = require('tailwindcss/lib/util/nameClass').default;
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default;
const createUtilityPlugin = require('tailwindcss/lib/util/createUtilityPlugin').default;

module.exports = {
  theme: {},
  variants: {},
  plugins: [
    plugin(({ addUtilities, theme, variants }) => {
      const colors = flattenColorPalette(theme('textShadowColor'));

      const getProperties = (value) => {
        return withAlphaVariable({
          color: value,
          property: '--tw-text-shadow-color',
          variable: '--tw-text-shadow-opacity',
        });
      };

      const utilities = _.fromPairs(
        _.map(colors, (value, modifier) => {
          return [
            nameClass('text-shadow', modifier),
            Object.assign({}, getProperties(value), {
              'text-shadow': 'var(--tw-text-shadow)',
            }),
          ];
        })
      );

      addUtilities(utilities, variants('textShadowColor'));
    }, {
      theme: {
        textShadowColor: (theme) => Object.assign({DEFAULT: 'currentColor'}, theme('colors')),
      }
    }),
    plugin(({ addUtilities, theme, variants }) => {
      addUtilities(
        {
          '*': {
            '--tw-text-shadow-opacity': '0',
            '--tw-text-shadow-color': 'rgba(0, 0, 0, var(--tw-text-shadow-opacity))',
            '--tw-text-shadow': theme('textShadow').DEFAULT,
          },
        },
        { respectImportant: false }
      )
  
      const utilities = _.fromPairs(
        _.map(theme('textShadow'), (value, modifier) => {
          return [
            nameClass('text-shadow', modifier),
            {
              '--tw-text-shadow': value,
            },
          ]
        })
      )
  
      addUtilities(utilities, variants('textShadow'))
    }, {
      theme: {
        textShadow: {
          DEFAULT: '0.1rem 0.1rem 0.5rem var(--tw-text-shadow-color)',
          none: 'none',
        },
      }
    }),
    plugin(
      createUtilityPlugin('textShadowOpacity', [['text-shadow', ['--tw-text-shadow-opacity']]]),
      {
        theme: {
          textShadowOpacity: (theme) => theme('opacity'),
        }
      }
    ),
  ],
}