Pseudo Elements in Tailwind

Beginners
1

Hello there! i am trying to “convert” to Tailwind CSS a page i had build in plain css.
I need to add the pseudo element ::before to my “a” nav items.
In PG interface I see the pseudo classes but not pseudo elements.
I would need to add the following css in tailwind


a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

Any hint,
Thanks

2

@red-rosefields As you mentioned, the visual editor doesn’t have controls for some of the tailwind pseudo-elements like ::before and ::after.

image

You might want to switch to the new class tree view, which gives you a lot more flexibility.
image

From there, you have access to a lot more pseudo-elements and can even define any that aren’t listed by using the “edit” option

image
image408×835 13.3 KB

This lets us easily add whatever we want

image
image1337×562 25.9 KB

Since content-none is the only Tailwind content utility, you’ll need to either use an arbitrary value or customize your Tailwind theme to get the content: attr(title); property you want.

1 Like
3

Thank you very much Adam, I think I will customise the tailwind.config.j TW theme to get my attr property in it. I was trying to use an arbitrary value but could not get it to work.
I will follow your tut Pinegrow's External Build Process for Tailwind CSS - YouTube on this.

1 Like
4

So I’m trying to follow your tutorial to get started with Tailwind CSS, but I’m having trouble at the beginning. When I run the command npx tailwind init -p, I’m getting an error message that says “command not found”. Has anyone here ever encountered this issue before?
I check my nodejs and nmp ver and they are there…
i have search high and low but have not come to a solution…
I am running macos monterey… if that can tel enything…

Screenshot 2023-04-19 at 14.41.28
Screenshot 2023-04-19 at 14.41.281720×1968 149 KB

Thanks

SOLVED.

Don’t know why but i had to run the command with the full path to the executable, other wise impossibile.

./node_modules/.bin/tailwind init -p
1 Like
5

I’m pretty sure you have to add Node to your system path on Windows after you install it if you want to use it without the full path.

Adding Node.JS to the system path

1 Like