Currently, I am facing an issue with a custom hook that manages the theme (dark/light mode) using tailwind CSS. Specifically, I have two images that are supposed to switch based on the theme mode selected. Despite successfully changing FontAwesome icons fr ...
I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so it s ...
Lately, I've noticed a lot of changes in the way next.js handles image sizing across different versions. Currently, I'm on version "next": "13.4.4", and I'm looking to create responsive images that take up 20% of the screen width while ...
I'm currently incorporating Tailwindcss into a React project to recreate the Star Wars website mobile menu. However, I am facing an issue where the box shadow added to the hamburger icon segments is not visible when the navigation drawer is opened. Access ...
I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWriter} alt=&q ...
I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses. You can find the AI npm package he ...
Lately, I've been utilizing Next.js and crafting components such as buttons, inputs, and cards with Tailwind CSS for my various projects. However, the repetitive task of rewriting these components from scratch for each new project has become quite tir ...
My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way... https://i.stack.imgur.com/8BJnI.png This is the code for my page. ...
I am working on creating a resizable box component and came up with the following code: export default function Box({ className="", width, height}: {className?: String, width: string, height: string}) { return ( <div className={`w-${w ...
Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...
I recently encountered an issue with my next.js app that utilizes DaisyUI, a tailwind-based CSS component library. The problem I'm facing is that no matter what I do, the DaisyUI navbar refuses to stretch all the way across the webpage horizontally. Instea ...
I am currently using tailwindcss and have this specific HTML code snippet: REPL: <div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300">1</div> <div class="col-span-4 bg-green-300" v-if=& ...
Using the "@nuxtjs/tailwindcss": "^2.0.0" for my Nuxt App has been quite helpful. Upon installation, it generated a tailwind.config.js file. I made some modifications to the code below: module.exports = { theme: {}, variants: {}, plug ...
Just beginning my journey with React Native and facing this error. Screenshot of IOS App emulator Screenshot of Terminal import React from "react"; import { StyleSheet, Text, View } from 'react-native'; import tw from "tailwind-rn& ...
Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...
I am currently working with Nextjs 13 and Tailwindcss. When attempting to run Storybook for the project, I encountered this error: ModuleNotFoundError: Module not found: Error: Can't resolve '/images/example.png' in 'C: eposmvpsrcstyles' The issue ari ...
Having trouble with implementing tailwindCss in my hbs file. Does anyone know the steps to integrate tailwindCss in a .hbs file? I've attempted several methods, but I can't seem to get the inline property of tailwindcss to apply to any element. ...
Can transitions be used with headlessui tabs? I am currently utilizing @headlessui/vue <template> <TabGroup> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> < ...
I've been searching for what seems like a simple solution, but I can't seem to find it. While researching similar issues, I noticed that people were having problems with the Hover style and extra white space after it, which is not the issue in my case. As ...
Having an issue with my Next 14.0.3 app and tailwind CSS. I recently installed swiper JS version 11.0.5 using npm. The problem arises when I reload the page, it takes about 1 or 2 seconds for the swiper styles to load. During this time, the swiper slides s ...
I've encountered an issue with Tailwind CSS styling in my web app. While everything looks perfect on my local machine, once I deploy the project on Vercel from my GitHub repository, the styling breaks. Any idea what could be causing this problem? Here's a ...
import { Inter } from "@next/font/google"; const inter = Inter({ subsets: ["latin"] }); export default function Nav() { return ( <nav className="bg-gray-800, bg-slate-900"> <div className="container ...
After only four months of learning and developing in react, I decided to create a simple portfolio for myself. However, I encountered an issue with a toggler and a button that I included in the navbar - they simply won't respond when clicked no matter what ...
I recently implemented some fixed tabs on one of my web pages. By making the tabs fixed, users can now smoothly scroll down each tab page without having to move the navigation tabs. Prior to fixing the tabs in place, I was able to scroll horizontally thr ...
I need help with adding a small check/tick icon next to the selected value, for example: Operations ✓ when the user chooses operations in the TopicList dropdown list. The TopicList is a class component used to retrieve data from the database which incl ...
I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...
I have a div with the following styles <div class="hidden sm:visible sm:flex"> .... </div> The sm:visible style is applied like this @media (min-width: 640px) .sm:visible { visibility: visible; } However, the property display: ...
I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen size adjusts. ...
Currently, I am utilizing Vue.js along with Tailwind CSS and Flowbite for component library support. However, I am encountering an issue with the modal component from Flowbite. Despite following the installation and configuration steps outlined in the docu ...
When referencing the npm command in the Tailwind documentation: npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 There are two versions mentioned, tailwindcss@npm:@tailwindcss/postcss7-com ...
Here's a component snippet I'm working on: export const TextInput = ({ label, wrapperClassName = "", inputClassName = "", labelClassName = "", placeholder = "", ...props }: InputProps & FieldHookConfi ...
I am currently exploring a method to allow users to specify the primary color of a website. When defining my Tailwind classes, I aim to utilize something like bg-primary-600 instead of directly inputting a color. This way, if the value for primary changes, ...
I've integrated Tailwind into my Next.js app, and it's functioning as expected on my local machine. However, when I deploy the app to Vercel or build and run it, the Tailwind classes seem to not be applied, giving the impression that Tailwind is not proper ...
Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below: Here's ...
I'm currently working on developing an answer sheet, commonly known as a "Bubble sheet", where the user has the ability to select either "A,B,C, or D" and see the bubble transition from light mode to dark mode just like when marking with a physical pe ...
As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...
<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...
Currently, I am in the process of developing a calendar application that has the capability to highlight event dates sourced from a file. The color used for marking these events is determined by their type. In this project, I am utilizing Next.js version 1 ...
Currently working on a project built on top of a NextJS template using TailwindCSS. Struggling to integrate MUI components due to unexpected behavior with the button element (White Button error in NextJS Project). While I am aware of solutions suggesting ...
Hey there! I'm currently working on implementing dark mode into my project by following a tutorial. However, the tutorial is based on JavaScript and not Vue, so I'm having some trouble converting this particular section of code to work with Vue 3 ...
I utilized tailwind css to style my navbar, which resulted in all elements being displayed inline. However, I am looking to center all the content instead. Can someone assist me in modifying the code to achieve a centered header using tailwind css? Header ...
I have a React Native project that I am working on, and I am trying to utilize storybook for component documentation. However, I'm facing an issue where the nativewind styles do not apply when viewing components in storybook. This results in seeing un ...
I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mobile s ...
I am currently working on a form that has a transition effect However, I encountered an issue: check out the problem here My goal is to keep the magnifying glass fixed in place while the form moves Here is a snippet of my code: import Search fro ...
I successfully created a responsive nav bar using Tailwind CSS in Next.js, and it is functioning perfectly. https://i.stack.imgur.com/yTCbs.png https://i.stack.imgur.com/rdXhL.png https://i.stack.imgur.com/J8fM6.png Everything works well, except when I ...
I have been experiencing issues with Tailwind not working properly on my Next.js project. Despite checking all configurations, the problem persists. I discovered that by moving the code from my navbar component to my page.js, the classes would apply. How ...
It seems like my tailwindcss isn't functioning properly. Is there something I missed? tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js ...
I'm currently using next JS in combination with tailwind css and the react-responsive-carousel package. The issue I'm facing is that when I swipe through the images, they transition horizontally without any additional effects such as fade or ease-in-out. ...
I'm currently developing a Next.js application that utilizes App Router and incorporates TailwindCSS for styling. In addition, I have implemented Storybook for component development. The challenge I am facing involves integrating custom fonts with Storyboo ...
How can I utilize props to avoid this repetition in my code?? import React from "react"; export const FindUs = () => { return ( <div className="p-[6%]"> <div className="text-landing-title font-semibold text-4xl "> ...
//I followed the instructions in the tailwind documentation to install and set up everything. However, when I try to use tailwind utility classes in my HTML file, they don't seem to work. Can someone please assist me with this issue? // Here is my src/sty ...
What is the best way to configure Storybook to handle Tailwindcss styles and absolute paths? Just a heads up, this question and answer are self-documenting in line with this. It was quite the process to figure out, but I'm certain it will help others ...
Currently, I am attempting to utilize Listbox provided by Headless UI in order to create a select dropdown menu for filtering purposes within my application. However, the issue I have encountered is that whenever I update my "selectedMake" state, it revert ...
Currently, I'm developing a frontend project using Next.js and Tailwind CSS. I have received a Figma design to incorporate into the project. One of the sections requires me to display a series of steps: https://i.stack.imgur.com/gDmGQ.png Do you have any ...
Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...
I recently created a simple template using Tailwind for my Next.js project. Normally, I rely on Tailwind's @layer components to incorporate custom CSS styles. However, this time I wanted to experiment with Sass, so I converted my globals.css file to glob ...
In my Prismic RichText editor, I have included two files (terms and conditions) that I would like to open in a new tab. Unfortunately, Prismic does not offer an option like target _blank for this functionality. I am currently working with NextJs and Tail ...
I am currently working on creating a card component within Next.js, with multiple color options. However, I am facing an issue where the Tailwind colors are not being recognized when I attempt to utilize them. Card.tsx: interface Props { // Adding suppo ...
click here Hello all, I am currently working on a Nextjs project and attempting to utilize the @apply processor. However, I am encountering an error message as shown above. This is my package.json: { "name": "simon-bask-health-app", ...
I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...
Currently, I am working on developing an up-and-down carousel with Tailwind CSS. However, I am encountering a challenge in aligning the elements in the second row of my grid. My main objective is to have these elements centered vertically within the grid. ...
When using the iconify library for VueJS, the icons' paths automatically have "currentColor" as their fill color. The issue arises when trying to set a path's color via CSS, as it seems to be ineffective. Even with "!important", the color won't change. Ini ...
How can I add top margin to my button only on mobile devices? import { Button } from '@mui/material'; <Button type="submit" variant="contained" color="primary" className="w-full md:w-auto sm:mt-4& ...
Would there be conflicts if I utilized both of them simultaneously? Is it advisable to proceed with this method? ...
Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...
When I use the @import in the tailwind css file, it works fine. However, when I try to add the font using the <link> tag in _document.jsx, it fails to work properly. In Chrome dev tools, it shows that the classes are applied but the fallback font is ...
I recently added a new plugin called tailwind-scrollbar-hide to my project. import type { Config } from "tailwindcss"; export default { content: ["./app/**/*.{ts,tsx,jsx,js}"], theme: { extend: { fontFamily: { sta ...
<template> <div> <div class="flex justify-center w-full"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div clas ...
I have integrated a calendar component from Tailwind UI into my Vue.js application. However, I am facing an issue with the following line of code: <div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100" style="grid-t ...
As I develop my NextJs application, I have set up a homepage as well as routes to products and about pages. My goal is to display a unique header image in the Nav section of each component, sourced from an API when a user switches between pages. How can ...
Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...
I need to dynamically change the colors based on a hex code retrieved from a database. In my variables.js file: const primaryColor = "#000000"; const secondaryColor = "#ff0000"; const notCheckedColor = "#9CA3AF"; export { primaryColor, secondaryColor, no ...
Check out the live demo here. Ensure to scroll down and click on a link in the header. In my project, I have two files named layout.tsx: one in the src directory and another in the (public) directory with a sticky <Header /> component. The expected ...
Here is a visual representation of the issue I'm facing (refer to the image): Check out the Image After inspecting with Chrome, it seems like the problem is connected to --tw-ring-shadow. I attempted to use classes like ring-0 and ring-offset-0 (men ...
Seeking to showcase weather API data from: () import Image from "next/image" interface Hour { time_epoch: number time: string temp_c: number temp_f: number is_day: number wind_mph: number wind_kph: number wind_deg ...