I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase.

I'm sure I'm missing something obvious, but I'm at a loss at this point.

tailwind.config.cjs

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

_app.js

import '../styles/globals.css'
import Menu from '../components/splash-menu';
import { AppWrapper } from '../context/dataContext';
import { UserWrapper } from '../context/userContext';


function MyApp({ Component, pageProps }) {
  return (
  <>
  <AppWrapper>
    <UserWrapper>
    <Component {...pageProps} />
    </UserWrapper>
  </AppWrapper>
  </>

  )
}

export default MyApp

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "A visualization and optimization insight tool for AWS Lambda",
  "main": "/dist/index.js/",
  "author": "",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "compile-dev": "npx tsc -w",
    ......(Add remaining text here).......
    "webpack-dev-server": "^4.8.1"
  }
}

globals.css

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

Answer №1

To optimize your global.css file, simply add these three lines at the beginning instead of the end.

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

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

What are some ways to enhance the opacity of a Material UI backdrop?

I'm looking to enhance the darkness of the material UI backdrop as its default appearance is not very dark. My goal is to make it dimmer and closer to black in color. ...

What is the best way to connect the state of a variable from one class to another in React?

How can I utilize the variable "restaurants" in Editar2.js? ---App.js--- const { restaurantes } = this.state; ---Editar2.js--- const ChooseRestaurant = (props) => { const options = props.restaurants.map((option) => { return(<opt ...

Widget Issue: Problem with Setting jQuery Datepicker Format to European Style

I could really use some assistance with this issue. My goal is to display the check-in and check-out dates in European format (dd/mm/yy) within the input field on this specific page: (username: 'numberone' ; pass: 'num270514'). When t ...

The styling of MUI components adapts when the Navigate component in React Router is initialized

Incorporating React Router into my application has led to an unexpected side-effect while implementing the <Navigate to="/"> component (which goes to <AthleteHomepage />) upon state change. Currently, I haven't set up dynamic sta ...

What is the best way to apply a CSS class to a div element without affecting its child elements using JavaScript?

Currently, I am using JavaScript to add and remove a CSS class through a click event. Within my div structure, I have multiple similar divs. While I can successfully add and remove the class from my main div, I am facing an issue where the class is also ap ...

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE

My introduction to TypeScript was an interesting experience. I decided to convert a simple JavaScript application, consisting of two files, into TypeScript. The first file, accounts.ts, contains the main code, while the second one, fiat.ts, is a support f ...

Strange behavior: JS object values disappear when accessed statically

I'm feeling puzzled. The issue at hand is that an object seems to lose its values within a loop based on the method of access. When accessed through variables, everything appears to be in order. However, when using static expressions identical to the ...

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

Here's a unique version: "Discovering how clients can easily connect to a new room using socketio

There are 5 rooms on my server named "A", "B", "C", "D", and "E." Server-Side In the server side code: io.on('connection', (socket) => { console.log('New user connected'); socket.on('disconnect', () => { ...

What is the best way to shift a text element within the footer section?

I have arranged two columns within the container, but I am looking to position the .company and .copyright text at the bottom left of the footer column. The Follow Us heading should be on the right side with the .justify-text below it, followed by social m ...

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

I have created an array that stores various images using angularJS: $scope.docImg = [ '../../Content/Image/BackGrounds/abra.png', '../../Content/Image/BackGrounds/background_black.jpg', '../../Content/I ...

How can I force a Kendo UI Chart to resize in VueJS?

When integrating Kendo UI's Chart component within a Vue application, how can we trigger the chart to refresh or redraw? Although the chart automatically adjusts to changes in width by filling its parent container horizontally, noticeable stretching ...

What is preventing MenuItemLink from being displayed in the menu?

I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...

Angular JS basic API: Displaying only information that starts with the term 'request'

I've been given the task of developing a straightforward AngularJS API. I have managed to set up the basics for displaying data, but I'm facing an issue where the table only retrieves data from the JSON file if it starts with "request". As a resu ...

Having trouble with my React Navbar after integrating react-anchor-link-smooth-scroll

Code snippet for navbar.jsx: import React, { useState } from 'react'; import './Navbar.css'; import logo from '../../assets/logo.svg'; import underline from '../../assets/nav_underline.svg'; import { AnchorLink } fro ...

Show or hide specific elements based on parameters using ng-show in Angular

One challenge I am facing is how to manage a menu with multiple buttons that open submenus without using a massive switch statement in my code. Instead, I want to try something different: In the HTML file, I call the function toggleVis and pass the nam ...

How to customize the button color in a Next.js application

Help Needed: Issue with Changing Default Button Color in Next.JS Web Application. The button text color appears as grey on Desktop Google Chrome, but shows up as blue on Mobile Chrome browser. I want to unify the color to be grey on both platforms. Custo ...

Ways to expose an object in a Node module

One of my modules relies on a parsing functionality, with other modules needing to query the values provided by this parser. I have some key questions regarding its design: How should I approach building it in terms of design aspects? Which method should ...

The error message "Adyencheckout is not a constructor" is popping up in my

Struggling to implement the Adyen dropin payment UI in NextJS and facing issues initializing the Adyen dropin component. Attempting to dynamically import Adyen web to avoid window is not defined error, but uncertain on how to use it as a constructor after ...

"Utilizing an if-else statement within a forEach loop

I have an array of ages and I want to determine the age range for each age along with the count, then push it into my object. The issue I am facing is that if there are multiple ages in the same range, it gets pushed twice. I only want to push it once and ...