Adding first letter uppercase selector support (::first-letter)

[damikun]

It can be nice to have build-in "first letter uppercase class", under text-transform..

Provide ability to use CSS selector :first-letter

https://www.w3schools.com/cssref/sel_firstletter.asp

[neupauer]

Hi, I think, you can achieve that, by adding custom variants

And then you can use first-letter:whatever e.g., first-letter:uppercase

[simonswiss]

Hey @damikun 👋

As mentioned above, this is a good use case for a plugin that adds a first-letter variant!

Here's an example to define the plugin:

const plugin = require('tailwindcss/plugin')

module.exports = {
  purge: [],
  theme: {},
  variants: {},
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant('first-letter', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`first-letter${separator}${className}`)}:first-letter`
        })
      })
    }),
  ],
}

This alone won't do anything, as you would need to enable the variant on specific core plugins.

Here, I will add it to the textTransform plugin:

variants: {
  textTransform: ({ after }) => after(['first-letter']),
},

Together, here's the config file:

const plugin = require('tailwindcss/plugin')

module.exports = {
  purge: [],
  theme: {},
  variants: {
    textTransform: ({ after }) => after(['first-letter']),
  },
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant('first-letter', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`first-letter${separator}${className}`)}:first-letter`
        })
      })
    }),
  ],
}

With this, you are now able to uppercase the first letter of a paragraph for example, by prefixing the uppercase with first-letter:, like so:

<p class="first-letter:uppercase">hello, how cool is that!</p>

Hope it helps! 👍

[damikun]

Hi @simonswiss thx for your response i will try this feature.. thx much for your answer...