In the github repo below is my portfolio I'm trying to build and one of the pages in the pages directory was the page of the dashboard project and everything was going well until I tried to add a background color of the tailwind utility class "bg-blue-600" to div element wrapping the react-icon rendered conditionally in the buttons.jsx file in the DashboardComponents directory and I thought it was css conflicts that caused this issue to I tried deleting some styles from globals.css and checking the console for any errors or css conflicts and lots of other possible checking actions but to no avail. Although, bg-white applies with no problems but other color do not take into account that these libraries are included in the project: chart.js react-chartjs-2 react-icons faker so if these libraries are responsible for the tailwind background issue, please mention the reason and the solution this is the repo for the project to have a look: https://github.com/Alharith-Albayati/portfolio.git Thank you and I hope the best for you
Tailwind background utility class not working in Next.js(pages router)
52 Views Asked by Alharith Albayati At
0
There are 0 best solutions below
Related Questions in REACTJS
- ussd reader in Recket Native module
- Teams tab application returns SSO error in mobile Outlook
- Github Pages Deployment deploys a blank page
- Is there any way to glow this bulb image like a real light bulb
- Optimize LCP ReactJs
- Page in React only renders elements after refreshing
- Unable to Post Form Data to MongoDB because of picturepath
- MERN Stack App - User Avatar Upload - 500 Error After Deployment on Render
- Hooks are not supported inside an async component error in nextjs project using useQuery
- How to change the Font Weight of a SelectValue component in React when a SelectItem is selected?
- On the server side, it returns undefined but on the client side, logs the values no problem
- Multilevel dropdown with checkboxes in Select component
- TypeScript Error only on big type only when assigned to a variable
- Deployment through app engine, cloud sql database, problem connecting with server code, doesn't connect
- Data is not filtering in props. Showing passdata.map is not a function
Related Questions in NEXT.JS
- Error **net::ERR_CONNECTION_RESET** error while uploading files to AWS S3 using multipart upload and Pre-Signed URL
- Check list of pages with axios
- Calling functions from Main Component while using tanstack table
- NextJS 14 site working in development but not in vercel
- Route Handler not working Next auth, Next Intl & Next 14
- NextJS Docker build fails: fetch failed ECONNREFUSED
- Need some advice on differentiating between subscriptions using Stripe
- Update Sidebar Height to Cover the Document Height (with React Pro Sidebar)
- How do I send an audio file to OpenAi?
- Next.js not updating state during OnClick after router.push to same page with different ID
- Next js delay before applying Emotion and MUI styles
- Next.js. Server actions in form using formik. Action with arguments didnt work
- Protect Server Actions with Next Auth in Next JS 14
- Next-Auth credentials login troubles debugging
- Hydration failed because the initial UI does not match what was rendered on the server: Next js Tanstack table
Related Questions in BACKGROUND
- Problem with Android App background service stoping
- flutter stripe_android:verifyReleaseResources'. > A failure occurred while executing com.android.build.gradle.tasks > Android resource linking failed
- How to Properly Interrupt the Download of a Background Image Using JavaScript
- Maintaining Background Consistency as Button Count Decreases
- Issue with simple java app that removes background from one image and overlays it onto another image and downloads the processed image
- Is there a way to gather the SSIDs of the connected networks in the background?
- Unity 2D - animated background
- CSS Animating Button Background - how to make this background move horizontally not vertically
- Change background on Tab react native app
- How can I edit ggMarginal background to match the plot background?
- How to structure a SwiftUI Push To Talk App backend?
- MPAndroidChart - Fill gradient horizontally
- Chrome Extension Highlight Feature Not Applying Background Color
- CSS image in div ignoring padding
- Under the swiftUI framework, the timer cannot continue to count in the background
Related Questions in TAILWIND-CSS
- General questions about creating a custom theme Moodle CMS
- Vue/TailwindCSS - Content is behind Sidebar
- 'bun' is not recognized as an internal or external command
- Trouble generating PDFs with Playwright in Docker container
- tailwind CSS applied on react component moves the navigation bar along in remix
- Is there a way to support Tailwind @apply in Visual Studio?
- Flex layout with grid system in tailwind
- How do I integrate an existing delete function that is located in my routes.php file to a delete button in a modal in my hr.employees.profile.php?
- How can i prevent the image from zooming in when i resize the browser?
- Tailwind CSS background image does not work on github pages
- How to achieve this with chart.js in react?
- What other ways to get my expo go to load?
- Tailwind.css in Remix project does not load file or styles
- Tailwind would not load in a new nextjs app... Unexpected character '@'
- Web server doesnt output the website like in the project on localhost
Related Questions in CONFLICT
- Yocto conflicting error while building rootfs
- How to resolve a merge conflict in Git?
- Dependency Conflict with TOCropViewController in React Native Project
- R package building: importing functions with identical names
- i want to use im my requirements.txt this tensorflow~=2.3.0 version but i get an error
- Merge happens in reverse way while using GitHub
- Auto-conflict detection and resolution in Maria DB
- Remove git merge commit without conflict
- How to set utf-8 as default encoding for pull request merge conflict extension in azure devops?
- How to resolve version conflict for Parselmouth and Pandas during installation of pytz?
- AlpineJS conflict x-data with VueJS
- Ionic Framework generate and Angular ESLint 02-03 styleguide rule component naming conflict
- Ignoring files that are not present in the destination branch when merging a source branch into it with git
- Tailwind background utility class not working in Next.js(pages router)
- How to support "FULL JOIN" clause
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?