title: Tailwind text color shown in blue instead of grey
body: <p>I am working on a react js project with node and npm as a package manager.</p>
  <p>Inside my project I am using multiple packages like heroicons and tailwind.</p>
  <p><strong>Inside my footer I want the text to be grey</strong> - therefore I am using the &quot;text-slate-500&quot; color inside my Footer.js file.</p>
  <p>My <strong>result is being shown in blue and underlined</strong>, even though I am not using the underline property inside my code.</p>
  <p>I am a total beginner with frontend development and also a newbie to tailwind css. So every help is very much appreciated and I am sorry in advance if some information is missing.</p>
  <p>Here are the files:</p>
  <p><strong>Footer.js</strong></p>
  <pre><code>import React from 'react'
  import { HomeIcon } from '@heroicons/react/outline'
  
  
  export const Footer = () =&gt; {
    return (
      &lt;footer className=&quot;mx-auto mt-32 w-full max-w-container px-4 sm:px-6 lg:px-8&quot;&gt;
        &lt;div className=&quot;border-t border-slate-900/5 py-10 row-start-auto&quot;&gt;
          &lt;p className=&quot;mt-5 text-center text-sm leading-6 text-slate-500&quot;&gt;© {new Date().getFullYear()} Hochschule für angewandte Wissenschaften Würzburg - Schweinfurt&lt;/p&gt;
          &lt;div className=&quot;mt-16 flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-slate-700&quot;&gt;
            &lt;a href=&quot;/datenschutz&quot;&gt;Datenschutz&lt;/a&gt;
            &lt;div className=&quot;h-4 w-px bg-slate-500/20&quot;&gt;
            &lt;/div&gt;
            &lt;a href=&quot;/impressum&quot;&gt;Impressum&lt;/a&gt;
            &lt;div className=&quot;h-4 w-px bg-slate-500/20&quot;&gt;&lt;/div&gt;
            &lt;a href=&quot;/barrierefreiheit&quot;&gt;Barrierefreiheit&lt;/a&gt;
            &lt;div className=&quot;h-4 w-px bg-slate-500/20&quot;&gt;&lt;/div&gt;
            &lt;a href=&quot;/&quot;&gt;Deutsch - English&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
    )
  }
  
  export default Footer;
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;aicard&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@headlessui/react&quot;: &quot;^1.6.6&quot;,
      &quot;@heroicons/react&quot;: &quot;^2.0.10&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.1.1&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;axios&quot;: &quot;^0.27.2&quot;,
      &quot;bootstrap&quot;: &quot;^5.1.3&quot;,
      &quot;chart.js&quot;: &quot;^3.9.1&quot;,
      &quot;fast-equals&quot;: &quot;^4.0.1&quot;,
      &quot;io&quot;: &quot;^1.0.5&quot;,
      &quot;nodemon&quot;: &quot;^2.0.16&quot;,
      &quot;query-string&quot;: &quot;^7.1.1&quot;,
      &quot;react&quot;: &quot;^18.1.0&quot;,
      &quot;react-chartjs-2&quot;: &quot;^4.3.1&quot;,
      &quot;react-dom&quot;: &quot;^18.1.0&quot;,
      &quot;react-router-dom&quot;: &quot;^6.3.0&quot;,
      &quot;react-scripts&quot;: &quot;^5.0.1&quot;,
      &quot;socket.io-client&quot;: &quot;^4.5.1&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.4.8&quot;,
      &quot;postcss&quot;: &quot;^8.4.16&quot;,
      &quot;tailwindcss&quot;: &quot;^3.1.8&quot;
    }
  }
  </code></pre>
  <p><strong>tailwind.config.js</strong></p>
  <pre><code>/** @type {import('tailwindcss').Config} */ 
  module.exports = {
    content: [
      &quot;./src/**/*.{js,jsx,ts,tsx}&quot;,
    ],
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
          'gameblue': '#1d3f56',
          'gamebluehover' : '#122736',
          'gamebluelight' : '#244f6b',
          'gamebluelightest' :'#326d94',
          'fhwsorange' : '#dd742e',
          'gameboardconfig' : '#2e4c61',
        },
      },
    },
    plugins: [],
  }
  </code></pre>
  <p>And this is my result:
  <a href="https://i.stack.imgur.com/oJkYM.png" rel="nofollow noreferrer">Footer.js visualized</a></p>