The color of the text in Tailwind is displayed in a refreshing blue instead of the

In my current project, I am utilizing React JS with Node, and npm as the package manager.

Within the project, I have incorporated various packages such as heroicons and tailwind.

To style the text in my footer as grey, I have applied the "text-slate-500" color in my Footer.js file.

Despite not including the underline property in my code, the result displays in blue and underlined.

As a beginner in frontend development and new to tailwind CSS, I appreciate any assistance and apologize for any missing information.

Below are the files:

Footer.js

import React from 'react'
import { HomeIcon } from '@heroicons/react/outline'


export const Footer = () => {
  return (
    <footer className="mx-auto mt-32 w-full max-w-container px-4 sm:px-6 lg:px-8">
      <div className="border-t border-slate-900/5 py-10 row-start-auto">
        <p className="mt-5 text-center text-sm leading-6 text-slate-500">© {new Date().getFullYear()} Hochschule für angewandte Wissenschaften Würzburg - Schweinfurt</p>
        <div className="mt-16 flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
          <a href="/datenschutz">Datenschutz</a>
          <div className="h-4 w-px bg-slate-500/20">
          </div>
          <a href="/impressum">Impressum</a>
          <div className="h-4 w-px bg-slate-500/20"></div>
          <a href="/barrierefreiheit">Barrierefreiheit</a>
          <div className="h-4 w-px bg-slate-500/20"></div>
          <a href="/">Deutsch - English</a>
        </div>
      </div>
    </footer>
  )
}

export default Footer;

package.json

{
  "name": "aicard",
  "version": "0.1.0",
  "private": true,
  // List of dependencies
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Custom color configurations
      },
    },
  },
  plugins: [],
}

See the visual representation of my Footer.js here

Answer №1

Assign direct classname to anchor link and use a specific class to remove text-decoration.

 <a href="/" classname="text-slate-500">Deutsch - English</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The customizing of font color with Fancytree's "extraClasses" feature is not being properly applied

In my web application, I have a tree that utilizes fancytree. Everything is functioning properly, except for the fact that I need to set the font color to red for certain nodes. I have implemented the use of extraClasses in my JSON, which is successfully a ...

The state variables of React components do not always retain their most recent value

Currently, I am working on implementing the functionality of an event based library called powerbi-client-react. The first step involves retrieving the component using getEmbeddedComponent and storing it in the variable report. Then, I need to utilize the ...

Display the X button solely once text has been inputted into the textbox

I have integrated a text clearing plugin from here in my project to allow users to clear the input field by clicking on an X button. However, I want to modify the code so that the X button only appears when there is text entered in the textbox. I attempt ...

Creating a draggable element in JavaScript using React

I've been attempting to create a draggable div element, but I'm encountering some perplexing behavior. The code I'm using is directly from w3schools and it functions correctly for them, however, in my implementation, the div always shifts to ...

Set dimensions for the input submit border inside

Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the elemen ...

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

The command "Npm Start Causes sleep is not accepted" just popped up

After cloning a React project from GitHub, I proceeded to run npm install, which successfully installed the node_modules folder. However, upon trying to run npm start, I encountered the following error: 'sleep' is not recognized as an internal or ...

Is there a way to apply a blur effect to just the div itself without affecting its contents

<style type="text/css"> .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; } #no-blur{ z-index: 20; } .box{ position:absolute; height: ...

What is the best way to change nested NPM dependency versions?

My goal is to implement the grunt-contrib-jasmine NPM package, which comes with a variety of dependencies. One part of the dependency structure appears as follows: ─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07607572 ...

Whenever I press a button, my desire is for each picture to seamlessly reposition itself in the exact same spot on the screen

Having some issues with my code. When I click a button, the plan is for the pictures to change one by one to simulate a traffic light sequence. However, when I run the code, all the pictures appear at once without any effect from the button. Any help in ac ...

Having trouble with installing Node.js on my BeagleBone Green board

Looking to boost the development of my ReactJs and Nodejs application on my BeagleBone Green card using cloud9, but I keep running into errors whenever I try to install nodejs or run npm commands. Check out this link for a screenshot of the error: https:/ ...

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

I am currently developing a text-to-speech functionality for a react application that can emphasize the word being spoken by highlighting it with a background color. This feature closely resembles the layout of the Firefox reader view. However, my curren ...

Install using npm to know when the installation process has finished

In my project, I utilize a python automated tool to streamline the process. The initial step involves running the command npm install, followed by npm run build to generate a .war file that is then deployed on a Tomcat server. Due to the nature of my work ...

No specification has been provided for the delivery

I'm currently working with the Meteor framework and I am attempting to send an uploaded file (HTML input) from the client to the server using the npm package Delivery. Below is my code: Client side : var socket = io.connect('http://0.0.0.0 ...

Ways to maintain image size while zooming out a webpage with CSS

Is there a way to maintain image dimensions when zooming out a page using CSS? Take, for example, fiverr.com. When the page is zoomed out by 25%, And then, when the page is zoomed back to 100% (normal), How can I fix the image dimensions in this situat ...

An error message has been detected, stating that the action of navigating with a payload was not properly handled

I'm encountering an issue with the "onLogin" function in the "LoginComponent". When I tap on the TouchableOpacity linked to that function, my intention is for the user to be directed to the "HomeComponent". However, instead of achieving this, I receiv ...

How come we have located the executable file?

After running the command npm install grunt -g, a folder is created at C:\Users\myname\AppData\Roaming\npm\node_modules\grunt-cli. However, in my path variable, only the C:\Users\myname\AppData\Roaming ...

Utilizing Next.js with a unique custom Node.js backend implementation

I have successfully developed the frontend using Next.js in order to utilize SSR and enhance SEO. Additionally, I have a personalized NodeJS+express server for managing users and other database tasks (tested thoroughly with Postman). My next step is to in ...

What are the steps to resolve the `Error: connect ETIMEDOUT` issue on a strapi server?

Every time I attempt to execute commands such as start or develop, I encounter errors on my personal computer and am unable to launch the strapi server. Despite already running yarn install to download dependencies, the issue persists. I have also experi ...

Utilizing JS datepicker for multiple input fields sharing a common class

After trying to implement the js-datepicker plugin from https://www.npmjs.com/package/js-datepicker, I ran into an issue. I have multiple input fields in which I want to use the same date picker, so I assigned them all the class 'year'. Unfortuna ...