Add text-indent utilities (#5449)

Co-Authored-By: Adam Wathan <[email protected]>

Co-authored-by: Adam Wathan <[email protected]>

Author: reinink

src/plugins/index.js

@@ -109,6 +109,7 @@ export { default as objectPosition } from './objectPosition'
 export { default as padding } from './padding'
 
 export { default as textAlign } from './textAlign'
+export { default as textIndent } from './textIndent'
 export { default as verticalAlign } from './verticalAlign'
 export { default as fontFamily } from './fontFamily'
 export { default as fontSize } from './fontSize'

src/plugins/textIndent.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('textIndent', [['indent', ['text-indent']]])
+}

stubs/defaultConfig.stub.js

@@ -712,6 +712,10 @@ module.exports = {
       2: '2',
     },
     textColor: (theme) => theme('colors'),
+    textIndent: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
     textOpacity: (theme) => theme('opacity'),
     transformOrigin: {
       center: 'center',

tests/arbitrary-values.test.css

@@ -312,6 +312,12 @@
 .p-\[var\(--app-padding\)\] {
   padding: var(--app-padding);
 }
+.indent-\[50\%\] {
+  text-indent: 50%;
+}
+.indent-\[var\(--indent\)\] {
+  text-indent: var(--indent);
+}
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }

tests/arbitrary-values.test.html

@@ -54,6 +54,7 @@
     <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
     <div class="skew-x-[3px]"></div>
     <div class="skew-y-[3px]"></div>
+    <div class="indent-[50%] indent-[var(--indent)]"></div>
     <div class="text-[2.23rem]"></div>
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[color:var(--color)]"></div>

tests/basic-usage.test.css

@@ -570,6 +570,12 @@
 .text-center {
   text-align: center;
 }
+.indent-6 {
+  text-indent: 1.5rem;
+}
+.-indent-12 {
+  text-indent: -3rem;
+}
 .align-middle {
   vertical-align: middle;
 }

tests/basic-usage.test.html

@@ -149,6 +149,7 @@
     <div class="stroke-2"></div>
     <div class="table-fixed"></div>
     <div class="text-center"></div>
+    <div class="indent-6 -indent-12"></div>
     <div class="text-indigo-500"></div>
     <div class="underline"></div>
     <div class="text-opacity-10"></div>