Question 199133 in CSS Question posted in
Some basic documentation can be found here.

Dynamic CSS not changing text-color on scroll Nuxt3+Tailwind

I’m not new, but also not super experienced with Nuxt3, and I’m having trouble with my tailwind CSS.
I’m trying to have the text change color from white to black, but it seems to not be registering the change in the view. When I console.log() I see the different variables changing values, but the view isn’t rendering any changes.

Here is my component where I want the text to change:

<script lang="ts" setup>
import { scrolled } from "~/composables/states"

function scrollToAnchor(anchorId: string): void {
  const element = document.getElementById(anchorId)
  if (element) {
    element.scrollIntoView({ behavior: "smooth" })
  }
}
</script>

<template class="sticky">
  <div
    class="w-full flex flex-row justify-around pt-16 font-medium">
    <NuxtImg src="/logo_white.png" class="h-full" />
    <button @click="scrollToAnchor('tattoos')">
      <p
        class="text-white"
        :class="{
          'text-black': scrolled,
        }">
        Tattoos
      </p>
    </button>
    <button @click="scrollToAnchor('artwork')">
      Artwork
    </button>
    <button @click="scrollToAnchor('contact')">
      Contact
    </button>
  </div>
</template>

<style scoped></style>

here is my states.ts:

export const scrolled = ref(scrollY > 0)

My layout where I’m using the component:

<script lang="ts" setup></script>

<template>
  <div class="relative">
    <TheHeader class="fixed z-10" />
    <slot />

    <button
      class="fixed flex bg-white text-blue p-4 bottom-0 left-2/4">
      To top
    </button>
    <TheFooter />
  </div>
</template>

<style scoped></style>

My package.json and nuxt.config.ts:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/image": "1.0.0-rc.1",
    "@nuxtjs/tailwindcss": "^6.7.2",
    "@types/node": "^18",
    "nuxt": "^3.5.2",
    "nuxt-icon": "^0.4.1"
  }
}

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: false,
  typescript: {
    strict: true,
    shim: false,
    includeWorkspace: true,
  },
  modules: [
    "@nuxtjs/tailwindcss",
    "@nuxt/image",
    "nuxt-icon",
  ],
})

I’ve tried a lot of different ways to make the CSS change on scroll.
I’ve made a handleScroll() function that was initiated onMounted(), it was called and I logged it, and saw it working but didn’t see the changes reflected in the view.
A couple of links to different posts I’ve tried following:

How to dynamically change class in Nuxt3 with Tailwind?

change background-color of navbar when scroll event with vuejs

What I’m trying to do is change the text in the

tag from whit when not scrolled to black when scrolled.

Thank you in advance 🙂

Tags:

2

Answers


  1. 0

    Your way to dynamic class should work. I created a simple codepen to test it.

    See if below helps

    1. open browser devtool (F12 in chrome), see if the class text-black is append in the element
    2. try hardcode text-black to see if this class actually works, if you creating custom colors in tailwind.config.js without using extend, the default colors will not work
    Login or Signup to reply.
  2. 0

    as long as text-white is in the class attribute it will take effect even if you set text-black in :class attribute. so you have to remove it on toggle too.

    in some nuxt versions, i had this issue.

    remove class attribute and change your :class attribute to this.

    :class="{
    'text-black': scrolled,
    'text-white': !scrolled
}"

    or to this.

    :class="[
    scrolled ? 'text-black' : 'text-white'
]"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search