How can I add "text-indent" with TailwindCSS

[ghost]

Is there any way to add "text-indent" with TailwindCSS ?

[hacknug]

You can use one of these two plugins:

• https://www.npmjs.com/package/tailwindcss-text-indent
• https://www.npmjs.com/package/tailwindcss-typography

[adamwathan]

Yep those will work, or you can just follow the instructions for adding your own utilities in the documentation:

https://tailwindcss.com/docs/adding-new-utilities

[MarcelloTheArcane]

@adamwathan Is there any way to add the default numbers?

For example widths have the increments 1, 2, 3, 4, 5, 6, 8, 10, ... 56, 64 which correspond to specific rems.

I'd like to be able to make a utility for .indent-1, .indent-2, etc programmatically.

[adamwathan]

@MarcelloTheArcane Use this plugin:

https://www.npmjs.com/package/tailwindcss-text-indent

...and configure it like this:

// tailwind.config.js
module.exports = {
  theme: {
    textIndent: theme => theme('spacing'),
    // ...
  },
  // ...
}

[bobgravity1]

the fact that i need a plugin to indent a paragraph honestly shows how broken web dev is..

[fuchunhui]

why plugin or utilities instead of default

[dospolov]

can you add 'indent' as default now with JIT mode?

[proimage]

the fact that i need a plugin to indent a paragraph honestly shows how broken web dev is..

Not web dev; Tailwind. ¯\_(ツ)_/¯

[JessicaSachs]

FYI, if it's helpful for someone, this is bundled by default into WindiCSS (A Tailwind-compat library, with native JIT... originally made for Vite). I was honestly surprised when indent-sm autocompleted in my editor 😅

[dospolov]

@adamwathan is there a reason why this CSS style is not provided out of the box?
For me it's pretty basic, but maybe there is a technical complexity

[bobgravity1]

how do you do it without tailwind?

…

On Fri, Jul 23, 2021 at 4:23 PM Michael C. ***@***.***> wrote: the fact that i need a plugin to indent a paragraph honestly shows how broken web dev is.. Not web dev; Tailwind. ¯_(ツ)_/¯ — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#928 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AP42NP3NYEG6V25GPVH6EK3TZGCQVANCNFSM4HN6BCYQ> .

[JessicaSachs]

how do you do it without tailwind?
…

text-indent is just a CSS property. Here’s a CSS Tricks article on it.

[joshxyzhimself]

@adamwathan, can't this be a built-in feature?

thank you!

[jpoints]

I googled this, and ended up here. So I am another one wanting this out of the box.
I assume it comes down to managing the size of the base build.

[hacknug]

It was added to core in #5449 about three weeks ago so I think it'll be included with v3. Core team can probably clarify if any of you have more questions but I'd say be a little more patient and you'll get this in core soon 👍