Having trouble getting rounded-lg and rounded-md to work properly with Tailwind CSS - any ideas why?

I'm currently working with Next.js version 14.2.4 and tailwindcss version 3.4.1, and I've encountered an issue where rounded-lg and rounded-md classes are not applying any border radius. Oddly enough, other classes like rounded-xl and just rounded seem to be working fine. I also have shadcn-ui integrated into my project. I've tried deploying the app and even tested it on a different browser, but the problem persists. Has anyone else faced this issue before?

Below is an excerpt from my package.json file. Feel free to ask if you need to see any other parts of my code:

{
  "name": "party-bracket",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.400.0",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "postcss": "^8",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
cssnext.jstailwind-cssshadcnui

Answer №1

After investigating, I have identified the issue. Within my tailwind.config.ts file, I found the following code:

  borderRadius: {
    lg: "var(--radius)",
    md: "calc(var(--radius) - 2px)",
    sm: "calc(var(--radius) - 4px)",
  },

I realized that I had removed the variable --radius from my :root definition in globals.css. To resolve the problem, I either reinstated the variable or removed the mentioned code snippet, which resolved the issue.

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

Navigating through API versions with nextjs and vercel

Currently, I am setting up an API using nextjs with Vercel deployments. Setting it up is quite straightforward; just create files under pages/api/. For instance, to create endpoints like /shows, /movies, /sports, I have: ./pages/api/ /shows /movies ...

next.jsvercelapi-versioning

Using the `position: sticky` property does not function properly if the HTML element has a height set to

Here is the CSS code I have for the two important items... html, body { background-image: url("../images/background.png"); background-attachment: fixed; height: 100%; } --and-- #navBar { font-family: Cinzel; position: sticky; t ...

htmlcssheightnavbarsticky

Encountering a `404 Error - Page Not Found` issue while using Next.js version 14.1

I am having trouble navigating from the home page in the header section to the Login and Register pages. Whenever I click on either of them, I get an error immediately. The structure of my folders is as follows: src ...app ......layout folder Footer.jsx ...

next.js

Troubleshooting issue: NextJS pre-rendering problem when using Context and Firestore Integration

I'm currently in the process of transitioning my React simple eCommerce app to NextJS, but I'm facing challenges when it comes to pre-rendering my product data while utilizing Context. The main issue I'm encountering is that I don't req ...

reactjsgoogle-cloud-firestorenext.jsreact-context

Styling the navigation bar using CSS and positioning a <div> element underneath

Struggling to design a navbar using Bootstrap and have a div positioned underneath it that fills the remainder of the page? You're not alone! As someone new to Bootstrap and CSS, this can be tricky. Here's an example of how I created a navbar: ...

htmlcss

"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Currently, I am undertaking a small project that involves creating a box with rough edges around some text. To achieve this effect, I am utilizing an SVG with unique edges similar to the design found at this link: (except mine is in SVG format). My goal ...

javascripthtmlcsssvg

Can a class be passed to the binding attribute in Angular framework?

We currently have a system in place that is dependent on a numeric value being set to either 1 or 2 in order to display specific icons. This method is functional. <span *ngIf="config.icon" [class.fas]="true" [class.fa-plus]="icon===1" ...

cssangular

JavaScript CompleteLink message

Hey there, I've come across a JavaScript code for a countdown timer but need some assistance with it. The issue I'm facing is that within the code, there's a line that displays a message to the user when the timer reaches zero. I want to kn ...

javascripthtmlcss

Unlimited scrolling feature utilizing NextJS13 server components (application directory)

We are currently in the process of refactoring our project to integrate Server components within the app directory. One of the initial challenges we are facing is how to incorporate infinite scroll pagination with the new "app" directory. Below is a simpl ...

reactjsnext.jsnext.js13react-server-components

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

css

jQuery Refuses to Perform Animation

I'm facing an issue with animating a specific element using jQuery while scrolling down the page. My goal is to change the background color of the element from transparent to black, but so far, my attempts have been unsuccessful. Can someone please pr ...

javascriptjqueryhtmlcss

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Is there a way to achieve a text filling effect on page scroll similar to the one found here: . The specific section reads: "Deepen customer relationships. Own the brand experience. Add high margin revenue. Manage it all in one place. Get back your pr ...

javascriptcssanimationscrollopacity

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

javascriptjqueryhtmlcssruby-on-rails

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

javascriptcssnext.jselectron

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

I am looking to create a four-column layout using only CSS, where the width of the columns will adjust responsively. To better understand my issue, take a look at the code snippet below: .row { width: 100%; display: table; } .col { display: table ...

htmlcss

I am looking for assistance constructing a task management application using vue.js

I am facing an issue with developing a to-do list using Vue.js. The goal is to add tasks to the list by entering them and clicking a button. Once added, the new task should show up under "All Tasks" and "Not finished". Buttons for marking tasks as " ...

htmlcssvue.jsvuejs2

The function returned by using useState(true) is not callable

I'm currently developing a Signup component that requires users to input their name, email, and password. Upon clicking the "Create Account" button, I want the Signup Form to be hidden and a Circular Spinner to be displayed. While utilizing the useSta ...

reactjsnext.js

Utilizing the map function in React to create a button reference

I am currently facing an issue that is relatively simplistic and doesn't have any real-world application. My goal is to locate a 'green' button and make it blink for a duration of 3 seconds. How can I achieve this using React? const btnLay ...

javascriptcssreactjs

The connection between the layout of dropdown menus and the way data is handled in forms

I have discovered three different methods for creating dropdowns that can be used in forms: 1) Utilizing HTML with "form-dedicated" attributes such as select and option value="" 2) Implementing the Bootstrap framework with div classes like "dropdown", Butt ...

javascripthtmlcsstwitter-bootstrap

What is the most effective method for locating and capturing a specific element (such as an input box) in Python Selenium using either Xpath or CSS selector

I am currently using selenium to scrape a website, primarily relying on xpath or CSS selectors to extract elements. However, I have noticed that these selectors are dynamic, which contradicts what I have read online about CSS selectors being stable. As a b ...

pythoncssseleniumxpath