Ability to style contenteditable states

[KevinGutowski]

Currently there’s no way to style the state of a text object when its content editable. I have to drop down to CSS selectors to perform this styling:

[contenteditable="true"]:active,
[contenteditable="true"]:focus{
  border:none;
  outline:none;
}

[moseskamau338]

Currently there’s no way to style the state of a text object when its content editable. I have to drop down to CSS selectors to perform this styling:

[contenteditable="true"]:active,
[contenteditable="true"]:focus{
  border:none;
  outline:none;
}

Did you manage this?

[joshbedo]

did you end up figuring something out for this? having the same issue.

[maubut]

Same concern here, did you figure out with something finally?

[JamesManningR]

Currently at work but it might be best to build this as a plugin
https://tailwindcss.com/docs/plugins#adding-variants

I'll try to have a look when I have a spare hour

[bianxm]

Yup, this was the easiest way to do it. I just added the following to my tailwind.config.js plugins:
plugin(function({ addVariant }){addVariant('contentEditable','&[contentEditable="true"]')})

Thanks for the hint :)

[vinismachadoo]

This worked for me without plugins

[&[contenteditable]]:focus:border-none [&[contenteditable]]:focus:outline-none
[&[contenteditable]]:active:border-none [&[contenteditable]]:active:outline-none