Implementing capitalize-first

[matschik]

Hello !
I was thinking about a CSS class useful to capitalize only the first letter of a string. https://caniuse.com/#feat=css-first-letter

.capitalize-first::first-letter {
  text-transform: uppercase;
}

<p class="capitalize-first">welcome to my website</p>

What do you think ?

[benface]

@matschik There is already a capitalize class (text-transform: capitalize).

[matschik]

@benface text-transform: capitalize is capitalizing first letter of every words.

<p class="capitalize">welcome to my website</p>

actually displays "Welcome to my website"

[matschik]

Up !

[Joaojack]

Up !

[simonswiss]

Hey!

As mentioned in this thread - there is a capitalize class already existing. I get that it's not exactly the same, but you can always create a plugin if you need to support capitalizing only the first word of a piece of text.

[matschik]

How can I do that exactly ?

[simonswiss]

Hey @matschik - I have prepared an example for you below 👇

[simonswiss]

Here's a Tailwind Play example how you could integrate this as a plugin.

In this specific scenario, I have enabled responsive and hover variants for it, and made an example for all three in the HTML.

https://play.tailwindcss.com/6Fz3f8mHpO?file=config

I'll copy the code here as well for reference:

// Tailwind config
const plugin = require('tailwindcss/plugin')

// Let's create a plugin that adds utilities!
const capitalizeFirst = plugin(function ({ addUtilities }) {
  const newUtilities = {
    '.capitalize-first:first-letter': {
      textTransform: 'uppercase',
    },
  }
  addUtilities(newUtilities, ['responsive', 'hover'])
})

module.exports = {
  theme: {},
  variants: {},
  // Let's register the plugin we created on line 3
  plugins: [capitalizeFirst],
}

<!-- index.html -->
<p class="capitalize-first">the first letter will always be uppercased!</p>
<p class="md:capitalize-first">the first letter will be uppercased on <code>md</code> screens and up.</p>
<p class="hover:capitalize-first">the first letter will be uppercased on hover.</p>

Hope it helps 👍

[diegoulloao]

It's not working for me

[ripern]

@diegoulloao I copied the code exactly as above and it worked. Is anything different in your case?

[riderx]

@simonswiss thanks for that, I just created a plugin inspired by your work:
https://www.npmjs.com/package/tailwind-capitalize-first-letter

[royvanv]

In JIT mode you can use first-letter:uppercase instead.

[ddahan]

Great thanks!
However, it works on <div> but not on <span>. Not sure to understand why...

[royvanv]

It only works on a block-level elements. You can use a display class like block or inline-block to make it a block-level element.

[sinashahoveisi]

you can use first-letter:capitalize class

[Gib-git]

this is the way

[mahendraAtMave]

<div className="flex justify-between gap-7">
    <h3 className="capitalize  md:first-letter:capitalize">
        text here
    </h3>
</div>

I want to capitalize the first letter of the first word on every screen size except mobile on mobile I want to capitalize the full heading but it's not working, why?
@sinashahoveisi any help?

[mahendraAtMave]

my bad, but here's what i want @wongjn
on mobile : Text Here - fully capitalized
on other screens: Text here - first word capitalized

[wongjn]

https://play.tailwindcss.com/z7JsHcBueQ

[mahendraAtMave]

appreciate your help mate, thanks 🙌🏻

[sinashahoveisi]

@mahendraAtMave

Thanks to @wongjn
you can use this code:

<h3 class="capitalize md:normal-case md:first-letter:uppercase">
   text here
</h3>

[mahendraAtMave]

yup, it worked, thank you 👍🏻

[TuanMinPay]

<div className="capitalize">
    {item.name.toString().toLowerCase()}
</div>

try it