chrome "new style rule" bugging out because of the unescaped double dot :

[torian257x]

Hi guys

I used to do this all the time and it's sooo annoying with tailwind.
in chrome

E.g. I select an element, then press "New Style Rule" to quickly prototype an idea

but:

as tailwind has the : in the classes, it adds the wrong default class. What do I mean?

after I press "new style rule" it will for example add:

.flex.justify-center.align-middle.pt-6.sm:pt-40{
}

for me to prototype. See the error?

must be

.flex.justify-center.align-middle.pt-6.sm\:pt-40

as a result, the new style selector added by chrome is wrong, and I cannot add my prototyped styles.

is there something to fix that, how are you guys doing it?

[paulpopus]

For quick testing, wouldn't necessarily call this prototyping, I would do one of the following:

Add classes to the markup, you can just double click the class in the inspector to edit it and add a new one.

Add a new class entirely by clicking on the .cls button in the Styles tab

What this will do is show you a list of all classes on that element and actually suggest you classes that have already been applied elsewhere in the document, making it great for tailwind.

If I want to just add CSS instead, I simply add my custom rules to the element.style for inline styling as that will avoid any inheritance issues and apply style changes to the element directly.

[torian257x]

thanks, but that doesnt solve the problem.

adding it to style means now you have to hand hold your styles, because it's not in the inspector file to copy it out.
Same with adding to class attribute. Useless to me if I have to remember everything I prepared.