# Pseudo Elements in Tailwind

**URL:** <https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924>\
**Category:** Beginners\
**Tags:** tailwind\
**Created:** [April 14, 2023, 5:39pm UTC](https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924 "2023-04-14T17:39:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [April 14, 2023, 5:39pm UTC](https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924/1 "2023-04-14T17:39:03Z")

</div>

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

```auto

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

```

Any hint,  
Thanks

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 14, 2023, 9:28pm UTC](https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924/2 "2023-04-14T21:28:31Z")

</div>

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

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fdc1e3854e15dc8582c7b482a66424f2803dbd07.png)

You might want to switch to the new class tree view, which gives you a lot more flexibility.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/34e29f20fa9e7cc8df2b86a6839275af6ba11289.png)

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/da233f7aeadf6b1c586b99e48c1e2fcfaf8f47f3.png)

This lets us easily add whatever we want

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2a9a5e228b929c6241ecb91f1fa2e40874dee44a.png)

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

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [April 16, 2023, 9:15pm UTC](https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924/3 "2023-04-16T21:15:06Z")

</div>

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](https://www.youtube.com/watch?v=ZidufjA1Qww&t=28s) on this.

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [April 19, 2023, 12:51pm UTC](https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924/4 "2023-04-19T12:51:04Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/68eb95356e95c88c35520cc0f254026ed8b77696.jpeg)

Thanks

**SOLVED.**

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

```auto
./node_modules/.bin/tailwind init -p

```

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [April 19, 2023, 8:44pm UTC](https://forum.pinegrow.com/t/pseudo-elements-in-tailwind/7924/5 "2023-04-19T20:44:19Z")

</div>

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](https://hackmd.io/@hm222vx/AddNodeJSPath)