This plugin adds utilities to use text-indent with Tailwind CSS.
Add this plugin to your project:
# Install using pnpm
pnpm install --save-dev tailwindcss-text-indent
# Install using npm
npm install --save-dev tailwindcss-text-indent
# Install using yarn
yarn add -D tailwindcss-text-indent// tailwind.config.js
{
theme: { // defaults to these values
textIndent: (theme, { negative }) => ({
...{
// sm: '2rem',
// md: '3rem',
// lg: '4rem',
},
...negative({
// sm: '2rem',
// md: '3rem',
// lg: '4rem',
}),
}),
},
variants: { // all the following default to ['responsive']
textIndent: ['responsive'],
},
plugins: [
require('tailwindcss-text-indent')(), // no options to configure
],
}.indent-sm { text-indent: 2rem; }
.indent-md { text-indent: 3rem; }
.indent-lg { text-indent: 4rem; }
.-indent-sm { text-indent: -2rem; }
.-indent-md { text-indent: -3rem; }
.-indent-lg { text-indent: -4rem; }