title: How to add a style on a condition in tailwind css
body: <p>I am making a Side Nav in React using tailwind css I have to add border-red color when a particular link is selected. So I am using this approach But this is not working Can anyone help me here</p>
  <pre><code>&lt;li className={&quot;flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white&quot; + (window.location.pathname === '/' ? 'border-red-200' : '')}&gt;
                &lt;NavLink to={&quot;/&quot;}&gt;
                  &lt;div className=&quot;sidebar&quot;&gt;
                    &lt;div className=&quot;float-left&quot;&gt;
                      &lt;svg
                        xmlns=&quot;http://www.w3.org/2000/svg&quot;
                        className=&quot;h-8 w-6 text-red-400&quot;
                        fill=&quot;none&quot;
                        viewBox=&quot;0 0 24 24&quot;
                        stroke=&quot;currentColor&quot;
                      &gt;
                        &lt;path
                          strokeLinecap=&quot;round&quot;
                          strokeLinejoin=&quot;round&quot;
                          strokeWidth={2}
                          d=&quot;M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6&quot;
                        /&gt;
                      &lt;/svg&gt;
                    &lt;/div&gt;
                    &lt;span className=&quot;text-2xl float-right pl-5&quot;&gt;
                      Home
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/NavLink&gt;
              &lt;/li&gt;
  </code></pre>