Exploring the integration of pre-defined Tailwind classes within Next JS development

As I transition my project from Vite JS to Next JS, I am currently facing an issue with importing Tailwind styles from a file. Even though the file is being read by my project, the styles are not being applied as expected.

I'm wondering if there is a way to achieve similar functionality in Next JS or if there is another method I should consider.

// Example styles.js file located in the styles folder of a Next JS Project
export const styles = { padding: "sm:px-8 py-3" };

// Implementation in any component within the Next JS Project
import { styles } from "../styles/styles.js";

const About = () => (
 <div className={`${styles.padding} text-white`}>
  ...
 </div>
)
cssnext.jstailwind-cssvite

Answer №1

This is the content of the Tailwind file. I experimented with different methods using ChatGPT, but unfortunately, I did not achieve success.

// import { styles } from '@/styles/styles.js';

// const {styles} = require('./styles/styles');


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./components/**/*.{js,jsx}", "./pages/**/*.{js,jsx}"],
  mode: "jit",
  theme: {
    extend: {
      colors: {
        primary: "#050816",
        secondary: "#aaa6c3",
        tertiary: "#151030",
        "black-100": "#100d25",
        "black-200": "#090325",
        "white-100": "#f3f3f3",
      },
      boxShadow: {
        card: "0px 35px 120px -15px #211e35",
      },
      screens: {
        xs: "450px",
      },
      backgroundImage: {
        "hero-pattern": "url('/assets/herobg.png')",
      },
      // ...styles,
    },
  },
  plugins: [],
};

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

Introducing space between div elements changes the arrangement of columns

I am facing an issue with my layout consisting of 6 div tags divided into 2 rows of fixed height. Whenever I try to add a margin around the divs, the rightmost div gets pushed down to the next row. How can I solve this problem? HTML: <div class="contai ...

csstwitter-bootstrapbootstrap-4

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

javascriptjqueryhtmlcsswordpress

Styling various versions of a <button> using Styled Components

In my app, I have a basic colored button that needs to change its color depending on the UI state: const StyledButton = styled.button` & { border: 0; color: white; cursor: pointer; } &:hover { background-color: ${(props) => ...

cssreactjsstyled-componentscss-modules

PHP loading incorrect CSS file

I have a question about how I am linking a CSS file in my PHP program: <html> <head> <title>Untitled Document</title> <link href='sa_mal_link_1.css' rel='stylesheet' type='text/css'> </head> ...

phphtmlcss

Utilizing Adjacent Sibling Selectors within the context of a specific enclosing class

I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...

csscss-selectors

Show input fields in a row

In an attempt to align my select form fields on the same line, I have tried adding display:inline; to both the select and label elements in my code. However, it did not produce the desired result. Here is the HTML code snippet: <form id ="myform1"> ...

css

Using Next.js 13 for authentication between server-side components and a separate backend

Looking for guidance on how to execute API requests from Nextjs 13 to a separate Python backend. I am faced with two different scenarios: API request made from client-side component API request made from server-side component When the request originates ...

next.jsnext.js13clerk

Encountering a problem while setting up a Node JS project with npm/npx using vite/react js, resulting in the error message: "node:internal/modules/cjs/loader:120

Currently, I have Node.js version v22.0.0 installed on my system. I am working on creating a new React JS project using Vite technology. However, when I try to initiate the project, I encounter an error in the terminal. npm create vite@latest node:interna ...

reactjsnode.jsnpmvitenpx

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

Is it possible to use -webkit-transform with dual background layers?

I've implemented a unique animation for a div that features two semi-transparent backgrounds: /* Custom keyframes for the animated background DIV. */ @-webkit-keyframes wind { 0% { background-position: 0px 0px, 0px 0px; } 100 ...

csshardware-accelerationbackground-positionwebkit-transform

What is the best way to align the main navigation at the center of

Even though I have utilized text-align: center, the style of .main-nav did not change. What is the most effective way to center this navigation menu? /***** Navigation *****/ .main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; f ...

css

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

htmlcssfrontendnavbarbootstrap-5

Ways to conditionally display a component in Next.js without the issue of caching CSS styles

I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...

csstypescriptcachingnext.js

distinguish different designs for individual components in Angular 5

My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates. If I include all CSS and js files in index.html, they all load at the ...

cssangularmodulebootstrap-4

Unable to make changes to stored information with EditorJS

I am facing an issue where I successfully create documents with the EditorJS tool and save them to a local folder as part of my NextJS project. However, when I try to reopen the saved file using EditorJS, it does not work as expected and I end up with an ...

next.jseditorjs

Safari shows a 403 Error stating "No authentication credentials provided", whereas other browsers like Chrome, Edge, and Firefox do not encounter this issue. This occurrence happens when using Django with Next.js

Currently facing issues with my website's compatibility on Safari and iOS devices. The main issue is that Safari is throwing 403 errors for some endpoints, even though the token was sent and this problem is specific to this browser. For instance: Th ...

djangodjango-rest-frameworkjwtnext.js

I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

How would you like your HTML code to function? When the cursor is on the iframe, do you want it to play a video? Also, should the parent page scroll when you scroll? <section class="section section-padding"> <div class="container"> ...

csshtmlbootstrap-4

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Below is the code snippet from my JSX file: import { useState, useEffect } from "react"; import { PropTypes } from "prop-types"; import { HashtagIcon } from "@heroicons/react/24/outline"; // Function to fetch categories from the API (temporary replaced wi ...

cssreactjsmaterial-uitailwind-cssborder

Enhance your website with a dynamic div zoom feature using the Jquery Zoom

I've been scouring the internet for a jQuery plugin that allows me to zoom in on an image. There are many options out there, but I prefer ones that display the zoomed-in image in a separate area rather than directly on the original image. For example ...

javascriptjqueryhtmlcsszooming

JavaScript: Selecting parent elements using getElementsByClassName

I am dealing with the following HTML code: <div class="item"> <img class="item-image" src="${item.getImage()}"/> <p>${item.getName()}</p> </div> and JavaScript: var classname = document.getElementsByClassName("item" ...

javascripthtmlcss