So basically if you are using Tailwind v3.4 according to the template provided by JS Mastery. You can copy paste the code which is compatible for the that version. The final code:

globals.css

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

/* Base Styles */
@layer base {
html {
@apply scroll-smooth;
}

{
@apply border-border;
}

body {
@apply bg-background text-foreground min-h-screen;
}

/* Scrollbar Removal /
.remove-scrollbar {
-ms-overflow-style: none; / IE and Edge /
scrollbar-width: none; / Firefox */
}
.remove-scrollbar::-webkit-scrollbar {
width: 0px;
height: 0px;
border-radius: 0px;
}
.remove-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.remove-scrollbar::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 0px;
}
.remove-scrollbar::-webkit-scrollbar-thumb:hover {
background: transparent;
}

/* Third-Party Overrides */
.recharts-responsive-container {
height: initial;
}

/* CSS Variables */
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}

/* Utility Styles /
@layer utilities {
/ Typography */
.text-h1 {
@apply text-[34px] leading-[42px];
}
.h1 {
@apply text-h1 font-bold;
}
.text-h2 {
@apply text-[24px] leading-[36px];
}
.h2 {
@apply text-h2 font-bold;
}
.text-h3 {
@apply text-[20px] leading-[28px];
}
.h3 {
@apply text-h3 font-semibold;
}
.text-h4 {
@apply text-[18px] leading-[20px];
}
.h4 {
@apply text-h4 font-medium;
}
.text-h5 {
@apply text-[16px] leading-[24px];
}
.h5 {
@apply text-h5 font-semibold;
}
.subtitle-1 {
@apply text-h5 font-medium;
}
.text-subtitle-2 {
@apply text-[14px] leading-[20px];
}
.subtitle-2 {
@apply text-subtitle-2 font-semibold;
}
.button {
@apply text-subtitle-2 font-medium;
}
.body-1 {
@apply text-[16px] leading-[24px] font-normal;
}
.body-2 {
@apply text-[14px] leading-[20px] font-normal;
}
.caption {
@apply text-[12px] leading-[16px] font-normal;
}
.overline {
@apply text-[10px] leading-[14px] font-normal;
}

/* Helper Classes */
.container {
@apply mx-auto max-w-7xl px-5;
}
.primary-btn {
@apply bg-brand hover:bg-brand-100 transition-all rounded-full button;
}
.flex-center {
@apply flex items-center justify-center;
}

/* Root Layout */
.main-content {
@apply remove-scrollbar h-full flex-1 overflow-auto bg-background px-5 py-7 sm:mr-7 sm:rounded-[30px] md:mb-7 md:px-9 md:py-10 text-foreground;
}

/* Dashboard */
.dashboard-container {
@apply mx-auto grid max-w-7xl grid-cols-1 gap-6 md:grid-cols-2 xl:gap-10;
}
.dashboard-summary-list {
@apply mt-6 grid grid-cols-1 gap-4 xl:mt-10 xl:grid-cols-2 xl:gap-9;
}
.dashboard-summary-card {
@apply relative mt-6 rounded-[20px] bg-card p-5 transition-all hover:scale-105 text-card-foreground;
}
.summary-type-icon {
@apply absolute -left-3 top-[-25px] z-10 w-[190px] object-contain;
}
.summary-type-size {
@apply h4 relative z-20 w-full text-right;
}
.summary-type-title {
@apply h5 relative z-20 text-center;
}
.dashboard-recent-files {
@apply h-full rounded-[20px] bg-card p-5 xl:p-8 text-card-foreground;
}
.recent-file-details {
@apply flex w-full flex-col xl:flex-row xl:justify-between;
}
.recent-file-name {
@apply subtitle-2 line-clamp-1 w-full text-muted-foreground sm:max-w-[200px] lg:max-w-[250px];
}
.recent-file-date {
@apply body-2 text-muted-foreground/80;
}
.empty-list {
@apply body-1 mt-10 text-center text-muted-foreground;
}

/* Type Page */
.page-container {
@apply mx-auto flex w-full max-w-7xl flex-col items-center gap-8;
}
.total-size-section {
@apply flex mt-2 flex-col justify-between sm:flex-row sm:items-center;
}
.file-list {
@apply grid w-full gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
}
.sort-container {
@apply mt-5 flex items-center sm:mt-0 sm:gap-3;
}

/* ActionsDropdown */
.rename-input-field {
@apply body-2 shad-no-focus h-[52px] w-full rounded-full border px-4 shadow-drop-1;
}
.delete-confirmation {
@apply text-center text-muted-foreground;
}
.delete-file-name {
@apply font-medium text-brand-100;
}
.modal-cancel-button {
@apply h-[52px] flex-1 rounded-full bg-card text-muted-foreground hover:bg-transparent;
}
.modal-submit-button {
@apply primary-btn h-[52px] w-full flex-1;
}

/* ActionsModalContent */
.file-details-thumbnail {
@apply mb-1 flex items-center gap-3 rounded-xl border border-muted/40 bg-muted/50 p-3;
}
.file-details-label {
@apply body-2 w-[30%] text-muted-foreground;
}
.file-details-value {
@apply subtitle-2 flex-1;
}

.share-wrapper {
@apply mt-2 space-y-2;
}
.share-input-field {
@apply body-2 shad-no-focus h-[52px] w-full rounded-full border px-4 shadow-drop-1;
}
.share-remove-user {
@apply rounded-full bg-transparent text-muted-foreground shadow-none hover:bg-transparent;
}
.remove-icon {
@apply aspect-square rounded-full;
}

/* AuthForm */
.auth-form {
@apply flex max-h-[800px] w-full max-w-[580px] flex-col justify-center space-y-6 transition-all lg:h-full lg:space-y-8;
}
.form-title {
@apply h1 text-center text-muted-foreground md:text-left;
}
.form-submit-button {
@apply primary-btn h-[66px];
}
.error-message {
@apply body-2 mx-auto w-fit rounded-xl bg-destructive/5 px-8 py-4 text-center text-destructive;
}

/* Card */
.file-card {
@apply flex cursor-pointer flex-col gap-6 rounded-[18px] bg-card p-5 shadow-sm transition-all hover:shadow-drop-3 text-card-foreground;
}
.file-card-details {
@apply flex flex-col gap-2 text-muted-foreground;
}

/* Chart */
.chart {
@apply flex items-center rounded-[20px] bg-primary p-5 text-primary-foreground md:flex-col xl:flex-row;
}
.chart-container {
@apply mx-auto aspect-square w-[180px] text-primary-foreground xl:w-[250px];
}
.polar-grid {
@apply first:fill-primary-foreground/20 last:fill-primary;
}
.chart-details {
@apply flex-1 items-start px-3 py-0 sm:px-5 lg:p-3 xl:pr-5;
}
.chart-total-percentage {
@apply fill-primary-foreground text-4xl font-bold;
}
.chart-title {
@apply h3 font-bold md:text-center lg:text-left text-primary-foreground;
}
.chart-description {
@apply subtitle-1 mt-2 w-full text-primary-foreground/70 md:text-center lg:text-left;
}

/* FileUploader */
.uploader-button {
@apply primary-btn h-[52px] gap-2 px-10 shadow-drop-1;
}
.uploader-preview-list {
@apply fixed bottom-10 right-10 z-50 flex size-full h-fit max-w-[480px] flex-col gap-3 rounded-[20px] bg-card p-7 shadow-drop-3 text-card-foreground;
}
.uploader-preview-item {
@apply flex items-center justify-between gap-3 rounded-xl p-3 shadow-drop-3;
}
.preview-item-name {
@apply subtitle-2 mb-2 line-clamp-1 max-w-[300px];
}

.error-toast {
@apply bg-destructive rounded-[10px];
}

/* Header */
.header {
@apply hidden items-center justify-between gap-5 p-5 sm:flex lg:py-7 xl:gap-10;
}
.header-wrapper {
@apply flex-center min-w-fit gap-4;
}
.sign-out-button {
@apply flex-center h-[52px] min-w-[54px] items-center rounded-full bg-primary/10 p-0 text-primary shadow-none transition-all hover:bg-primary/20;
}

/* Mobile Navigation */
.mobile-header {
@apply flex h-[60px] justify-between px-5 sm:hidden;
}
.header-user {
@apply my-3 flex items-center gap-2 rounded-full p-1 text-muted-foreground sm:justify-center sm:bg-primary/10 lg:justify-start lg:p-3;
}
.header-user-avatar {
@apply aspect-square w-10 rounded-full object-cover;
}
.mobile-nav {
@apply h5 flex-1 gap-1 text-primary;
}
.mobile-nav-list {
@apply flex flex-1 flex-col gap-4;
}
.mobile-nav-item {
@apply flex text-muted-foreground gap-4 w-full justify-start items-center h5 px-6 h-[52px] rounded-full;
}
.mobile-sign-out-button {
@apply h5 flex h-[52px] w-full items-center gap-4 rounded-full bg-primary/10 px-6 text-primary shadow-none transition-all hover:bg-primary/20;
}

/* OTP Modal */
.otp-close-button {
@apply absolute -right-1 -top-7 cursor-pointer sm:-right-2 sm:-top-4;
}

/* Search */
.search {
@apply relative w-full md:max-w-[480px];
}
.search-input-wrapper {
@apply flex h-[52px] flex-1 items-center gap-3 rounded-full px-4 shadow-drop-3;
}
.search-input {
@apply body-2 shad-no-focus placeholder:body-1 w-full border-none p-0 shadow-none placeholder:text-muted-foreground;
}
.search-result {
@apply absolute left-0 top-16 z-50 flex w-full flex-col gap-3 rounded-[20px] bg-card p-4 text-card-foreground;
}
.empty-result {
@apply body-2 text-center text-muted-foreground;
}

/* Sidebar */
.sidebar {
@apply remove-scrollbar hidden h-screen w-[90px] flex-col overflow-auto px-5 py-7 sm:flex lg:w-[280px] xl:w-[325px];
}
.sidebar-nav {
@apply h5 mt-9 flex-1 gap-1 text-primary;
}
.sidebar-nav-item {
@apply flex text-muted-foreground gap-4 rounded-xl lg:w-full justify-center lg:justify-start items-center h5 lg:px-[30px] h-[52px] lg:rounded-full;
}
.sidebar-user-info {
@apply mt-4 flex items-center justify-center gap-2 rounded-full bg-primary/10 p-1 text-muted-foreground lg:justify-start lg:p-3;
}
.sidebar-user-avatar {
@apply aspect-square w-10 rounded-full object-cover;
}

.shad-active {
@apply bg-primary text-primary-foreground shadow-drop-2;
}

/* Sort */
.sort-select {
@apply shad-no-focus h-11 w-full rounded-[8px] border-transparent bg-card shadow-sm sm:w-[210px];
}
.sort-select-content {
@apply shadow-drop-3;
}

/* Thumbnail */
.thumbnail {
@apply flex-center size-[50px] min-w-[50px] overflow-hidden rounded-full bg-primary/10;
}
.thumbnail-image {
@apply size-full object-cover object-center;
}

/* Sidebar & MobileNavigation */
.nav-icon {
@apply w-6 filter invert opacity-25;
}
.nav-icon-active {
@apply invert-0 opacity-100;
}
}

/* ShadCN Overrides */
@layer shadcn {
.shad-no-focus {
@apply outline-none ring-offset-transparent focus:ring-transparent focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0;
}
.shad-input {
@apply border-none shadow-none p-0 shad-no-focus placeholder:text-muted-foreground body-2;
}
.shad-form-item {
@apply flex h-[78px] flex-col justify-center rounded-xl border border-input px-4 shadow-drop-1;
}
.shad-form-label {
@apply text-muted-foreground pt-2 body-2 w-full;
}
.shad-form-message {
@apply text-destructive body-2 ml-4;
}
.shad-alert-dialog {
@apply space-y-4 max-w-[95%] sm:w-fit rounded-xl md:rounded-[30px] px-4 md:px-8 py-10 bg-card outline-none;
}
.shad-submit-btn {
@apply bg-brand button hover:bg-brand-100 transition-all rounded-full;
}
.shad-otp {
@apply w-full flex gap-1 sm:gap-2 justify-between;
}
.shad-otp-slot {
@apply text-[40px] font-medium rounded-xl ring-brand shadow-drop-1 text-brand-100 justify-center flex border-2 border-input size-12 md:size-16 gap-5 !important;
}
.shad-sheet {
@apply pt-0;
}
.shad-sheet button,
.shad-dialog-button {
@apply focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 outline-none;
}
.shad-dropdown-item {
@apply cursor-pointer;
}
.shad-dialog {
@apply rounded-[24px] w-[90%] max-w-[400px] px-6 py-8;
}
.shad-chart-title {
@apply text-foreground;
}
.shad-select-item {
@apply cursor-pointer;
}
}

tailwind.config.ts

import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";

const config: Config = {
darkMode: ["class"],
content: [
"./pages//*.{js,ts,jsx,tsx,mdx}",
"./components//.{js,ts,jsx,tsx,mdx}",
"./app/**/.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
brand: {
'100': '#EA6365',
DEFAULT: '#FA7275'
},
red: '#FF7474',
error: '#b80000',
green: '#3DD9B3',
blue: '#56B8FF',
pink: '#EEA8FD',
orange: '#F9AB72',
light: {
'100': '#333F4E',
'200': '#A3B2C7',
'300': '#F2F5F9',
'400': '#F2F4F8'
},
dark: {
'100': '#04050C',
'200': '#131524'
},
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
fontFamily: {
poppins: ["var(--font-poppins)"]
},
boxShadow: {
'drop-1': '0px 10px 30px 0px rgba(66, 71, 97, 0.1)',
'drop-2': '0 8px 30px 0 rgba(65, 89, 214, 0.3)',
'drop-3': '0 8px 30px 0 rgba(65, 89, 214, 0.1)'
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
keyframes: {
'caret-blink': {
'0%,70%,100%': {
opacity: '1'
},
'20%,50%': {
opacity: '0'
}
}
},
animation: {
'caret-blink': 'caret-blink 1.25s ease-out infinite'
}
}
},
plugins: [tailwindcssAnimate],
};
export default config;

This will work . If the issue still persists try to debug it or use AI help.

Unable to config tailwind and Global CSS for the latest NextJS #17

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions