Having trouble with Tailwind UI components displaying properly in Next.js?

I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project.

Take a look at my tailwind.config.ts:

export const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

Here's an excerpt from my package.json file:

{
  "name": "nextjs-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.6",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "tailwindcss": "^3.0.23"
  },
  "devDependencies": {
    "@types/node": "17.0.21",
    "@types/react": "17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "4.6.2"
  }
}

And here is a snippet of my custom _document.tsx file:

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

This is what the Signin component currently looks like:

https://i.sstatic.net/oFlAV.png

And this is how it's supposed to look:

https://i.sstatic.net/n9O2R.png

Answer №1

To customize your Tailwind CSS configuration, include additional file paths (e.g., 'components' and 'sections') in the tailwind.config.js:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    // Add extra paths here...
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

For more information, visit - https://tailwindcss.com/docs/guides/nextjs

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

Is it considered acceptable in React for the value of one state to be determined by another state?

Consider this scenario: state1 tracks the mouseover of clientX and clientY, while state2 retrieves the value from state1 upon clicking. Is this implementation acceptable? const [move,setMove]=useState([]) const [click,setClick]=useState([]) useEffect(() ...

Can I set a nested DIV to a higher z-index than a parent DIV in IE7, so that it appears above it?

UPDATE!!! Apologies for the confusion, it turns out the issue was with the #container DIV missing "float:left;". Please check the HTML rendering in Firefox and IE7 to see the impact! I am facing difficulty getting a nested DIV to appear above another nes ...

The debate between having one complex store in Flux architecture versus two smaller ones

When it comes to creating stores for settings, is it better to have more smaller stores or fewer larger ones? For instance, if I have settings for two pages - graphSettings and productSettings, should I create separate stores for each page or combine the ...

Best method for distributing components across nextjs zones?

Scenario: I am currently working on a project using Next.js and taking advantage of its multi zones feature. This feature allows us to run multiple independent NextJS applications as a unified app, managed by different teams. The Issue: One challenge I fa ...

Utilizing environmental variables within React builds: A step-by-step guide

Within my React project, I rely on certain environmental variables that may need to be updated periodically. I've observed that when I run 'npm run build', these environmental paths become hardcoded. For example: const server_address = proce ...

A guide on implementing CSS and Styling in a React component

Struggling to style my React.js file that was converted from a standard web page. I have the original CSS but unsure how to use React for proper styling. Any assistance is welcomed! var NavBar = React.createClass({ render: function() { return ( ...

Issue: The `style` attribute requires a mapping of style properties to their respective values, rather than a string representation

I'm encountering an issue while trying to create a functional component that returns an SVG. Can anyone help me troubleshoot this? Below is the code snippet: import React from 'react'; const TwitterIcon = () => { return ( <svg ...

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

I have a table with several columns and 1000 rows. When I print the page, it breaks the rows onto different pages, showing the remaining rows on subsequent pages. I want to display the complete record in one go. Below is a sample code with only one row in ...

Upon the initial rendering, Next.js obtains access to the query { amp: undefined }

When using Next.js 9.3, I encountered an issue where I needed to access the query on initial render and pass the result of the query to next/head in order to change the title and description of the page. The component is receiving the query from the useRo ...

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

Set the container width to a fixed size, then center a div within it with a dynamic width. Ensure that the left and right div

Arrange three columns with a fixed combined width. The center column will have dynamic content, while the left and right columns should fill out the remaining space equally. For example, see this demonstration: http://jsfiddle.net/htKje/ <div class="c ...

Can you please provide me with detailed instructions on how to use the radio button?

As someone who isn't a professional coder, I dabble in creating code for fun. Right now, I'm working on a roleplay project on a website where each character has a designated "space" to input HTML and CSS code as a template. I've stumbled upo ...

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

Encounter the error message "400 Bad Request" while using the Next.js Image

I am currently working on implementing Next.js Image to display an image in my navbar. Below is the code I have written: import Link from 'next/link' import Image from 'next/image' import { Text, useColorModeValue } from '@chakra- ...

Achieve a perfectly centered and responsive image placement on a webpage accompanied by a countdown timer

I've been trying to design an HTML page with a countdown feature, and I want to place an image above it that is centered and responsive. Despite my efforts, I haven't been able to achieve the desired responsiveness. I envision it looking like thi ...

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app: library(shiny) ui <- fluidPage(tags$head(includeCSS("www/mycss.css")), selectInput("foo", "Choose", width = '20%', multiple = F, selected = "red1", choices = list(red = c ...

How to retrieve the index upon clicking in Javascript

In my 3d art gallery project, I am utilizing plain JavaScript. The task at hand involves populating certain columns with images by pulling from an array of image sources. On click, I need to retrieve the index of the clicked image so that I can extract add ...

Incorporate keyframe animation into a styled component in material-ui using React

Currently seeking assistance with implementing key frames animation using react material-ui(version ^5.0.0). I am using styled components to style my JSX elements, but encountering errors when trying to incorporate keyframes animation within these styled c ...

The issue with dispatching actions in TypeScript when using Redux-thunk

As a beginner in TypeScript, I apologize if my question seems silly, but I'll ask anyway: I'm attempting to make an async call getUsersList(), but the issue is that it's not triggering the dispatch (it's not logging "hello"). It worked ...

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...