Comments (9)
Using Tailwind CSS's hover state variants and box-shadow utilities, you can achieve the effect. For example:
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 hover:shadow-md">
Taxonomy
</button>
from taxonomy.
this is still open or closed ? can i work on this?
from taxonomy.
this is still open or closed ? can i work on this?
Hi @shiv-2810 , I'm actively working on this issue. It's still open, and I'll update it once I have a solution or progress to share.
from taxonomy.
Hey Everybody! I have been able to do the shadow hover effect in light color scheme but i am facing some difficulties while implementing the same in dark color scheme. Is there any variable in the code that I can import to taxonomy/app/(marketing)/page.tsx? Please let me know the same. Thank You in advance!😊
Current Status:
Problem:
from taxonomy.
You want to create a shadow effect that adapts to both light and dark themes, you have a couple of options:
- Global CSS Class:
- Implement a class in your
globals.css
. - Define different shadow colors for light and dark modes using CSS variables in
:root
and.dark
. - Example:
- Implement a class in your
:root {
--shadow-color [Your Light Mode Shadow Color];
}
.dark {
--shadow-color [Your Dark Mode Shadow Color];
}
and then use tailwind box-shadow class:
<button class="bg-indigo-500 shadow-lg shadow-shadow-color">Get Started</button>
or of course you can also create a custom class and use this
.custom-shadow {
box-shadow: var(--shadow-color);
}
When you switch to dark mode, the shadow color will change accordingly. This is a clean approach if you use the shadow effect on many elements across your project.
- Tailwind's Dark Mode Variant:
- Define styles specifically for dark mode using Tailwind's
dark:
variant. - Example:
- Define styles specifically for dark mode using Tailwind's
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:shadow-md hover:shadow-color.light dark:hover:shadow-color.dark">
Taxonomy
</button>
Either approach works well, depending on your project's needs. The global CSS class method provides a centralized solution for multiple elements, while the Tailwind variant offers a quick way to adjust styles for individual components.
Let me know if you have any further questions!
from taxonomy.
@mardausdennis
Thanks a lot! It really helped me.😊
from taxonomy.
Is this better than before?
from taxonomy.
Looks like you got it to work! 😀 Make sure to close the issue when everything is working fine.
from taxonomy.
Looks like you got it to work! 😀 Make sure to close the issue when everything is working fine.
test
from taxonomy.
Related Issues (20)
- [bug] post is even being edited without input changes HOT 1
- [feedback] tab key is not preferable to use for keyboard functions
- [feature] Containerize with docker for easier installing and testing HOT 1
- SEO Optimization
- The toast's close button is colliding with the edge of its container. HOT 2
- Unable to resolve dependency tree after npm install HOT 2
- Handle errors when you create a post with title lesser than 3 characters HOT 1
- Clarification on Copyright and License Usage for Open Source Templates
- The theme- toggle button shoud be in navbar so easier access
- Bug: 'Ctrl+K' doesn't work in Documentation page. HOT 2
- Error when running "pnpm dev" HOT 1
- Does anybody got this error too? HOT 2
- Streamline Berachain function navigation request
- Revolutionizing Taxonomy: Our Forking Adventure
- Demo: Broken HOT 4
- Bump to latest version of Next JS?
- Content Layer page does not exist HOT 3
- Add the landingpage page
- Suitable Way of Displaying Toast from Data Table Row Action HOT 1
- Add a twitter logo after 'follow along on Twitter' in home page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from taxonomy.