NextJS - Not Able To Use Custom Colors In Tailwind CSS In
Question
I'm trying to use NextJs with Tailwinds CSS to make a project. However, whenever I try to use a custom color for the background color it throws this error:
Failed to compile
./styles/globals.css:7:12
Syntax error: /Users/anishkunapareddy/Desktop/Projects/React/hulu-clone/styles/globals.css The `bg-[#06202A]` class does not exist. If you're sure that `bg-[#06202A]` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
5 | @layer base {
6 | body {
> 7 | @apply bg-[#06202A] text-gray-300;
| ^
8 | }
9 | }
Code
index.js
import Head from "next/head";
import Image from "next/image";
import Header from "../components/Header";
export default function Home() {
return (
<div>
<Head>
<title>Hulu 2.0</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{/* Header */}
<Header />
{/* Nav */}
{/* Results */}
</div>
);
}
tailwind.config.js
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
globals.css
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
System Info:
OS: macOS BigSur 11.3 Node Version: 16.2.0
3 answers
solution1
1 2021-05-24 22:15:34
inside of extended theme, you can call custom colors and/or variables directly -- UPDATE -- included my entire tailwind.config.js file tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
important: true,
purge: {
content: [
'./components/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}'
],
options: {
safelist: {
standard: ['outline-none']
}
}
},
darkMode: 'class',
theme: {
extend: {
zIndex: {
'-10': '-10',
100: '100',
150: '150'
},
maxWidth: {
'9xl': '121rem', // 1936px
'8xl': '96rem' // 1536px
},
screens: {
xs: '375px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1440px',
'3xl': '1920px'
},
transitionDuration: {
0: '0ms',
300: '300ms',
500: '500ms',
700: '700ms',
1000: '1000ms'
},
rotate: {
0: '0deg',
45: '45deg',
90: '90deg',
125: '125deg',
180: '180deg',
270: '270deg',
360: '360deg'
},
fontFamily: {
header: ['goudy-bookletter-1911', 'serif'],
heady: ['p22-marcel-script-pro', 'sans-serif'],
poppins: ['poppins', 'sans-serif'],
somaRoman: ['neue-haas-grotesk-text', 'sans-serif'],
somaDisplay: ['neue-haas-grotesk-display', 'sans-serif'],
sans: ['Inter', ...defaultTheme.fontFamily.sans]
},
colors: {
'reddit-0': 'var(--reddit-0)',
'reddit-1': 'var(--reddit-1)',
'reddit-2': 'var(--reddit-2)',
'reddit-3': 'var(--reddit-3)',
'reddit-4': 'var(--reddit-4)',
'primary-0': 'var(--primary-0)',
'primary-1': 'var(--primary-1)',
'primary-2': 'var(--primary-2)',
'primary-3': 'var(--primary-3)',
'primary-4': 'var(--primary-4)',
'primary-5': 'var(--primary-5)',
'primary-6': 'var(--primary-6)',
'primary-7': 'var(--primary-7)',
'primary-8': 'var(--primary-8)',
'primary-9': 'var(--primary-9)',
'secondary-0': 'var(--secondary-0)',
'secondary-1': 'var(--secondary-1)',
'secondary-2': 'var(--secondary-2)',
'secondary-3': 'var(--secondary-3)',
'secondary-4': 'var(--secondary-4)',
'secondary-5': 'var(--secondary-5)',
'secondary-6': 'var(--secondary-6)',
'secondary-7': 'var(--secondary-7)',
'secondary-8': 'var(--secondary-8)',
'secondary-9': 'var(--secondary-9)',
'secondary-10': 'var(--secondary-10)',
'accents-0': 'var(--accents-0)',
'accents-1': 'var(--accents-1)',
'accents-2': 'var(--accents-2)',
'accents-3': 'var(--accents-3)',
'accents-4': 'var(--accents-4)',
'accents-5': 'var(--accents-5)',
'accents-6': 'var(--accents-6)',
'accents-7': 'var(--accents-7)',
'accents-8': 'var(--accents-8)',
'accents-9': 'var(--accents-9)',
'theme-0': 'var(--theme-0)',
'theme-1': 'var(--theme-1)',
lightBlue: {
0: '#E3F8FF',
100: '#B3ECFF',
200: '#81DEFD',
300: '#5ED0FA',
400: '#40C3F7',
500: '#2BB0ED',
600: '#1992D4',
700: '#127FBF',
800: '#0B69A3',
900: '#035388'
},
cyan: {
0: '#E0FCFF',
100: '#BEF8FD',
200: '#87EAF2',
300: '#54D1DB',
400: '#38BEC9',
500: '#2CB1BC',
600: '#14919B',
700: '#0E7C86',
800: '#0A6C74',
900: '#044E54'
},
rojo: {
0: '#610316',
100: '#8A041A',
200: '#AB091E',
300: '#CF1124',
400: '#E12D39',
500: '#EF4E4E',
600: '#F86A6A',
700: '#FF9B9B',
800: '#FFBDBD',
900: '#FFE3E3'
},
rosado: {
0: '#620042',
100: '#870557',
200: '#A30664',
300: '#BC0A6F',
400: '#DA127D',
500: '#E8368F',
600: '#F364A2',
700: '#FF8CBA',
800: '#FFB8D2',
900: '#FFE3EC'
},
amarillo: {
0: 'hsl(15, 86%, 30%)',
100: 'hsl(22, 82%, 39%)',
200: 'hsl(29, 80%, 44%)',
300: 'hsl(36, 77%, 49%)',
400: 'hsl(42, 87%, 55%)',
500: 'hsl(44, 92%, 63%)',
600: 'hsl(48, 94%, 68%)',
700: 'hsl(48, 95%, 76%)',
800: 'hsl(48, 100%, 88%)',
900: 'hsl(49, 100%, 96%)'
},
verdeAzulado: {
// blueish-green === teal (espanol)
0: 'hsl(170, 97%, 15%)',
100: 'hsl(168, 80%, 23%)',
200: 'hsl(166, 72%, 28%)',
300: 'hsl(164, 71%, 34%)',
400: 'hsl(162, 63%, 41%)',
500: 'hsl(160, 51%, 49%)',
600: 'hsl(158, 58%, 62%)',
700: 'hsl(156, 73%, 74%)',
800: 'hsl(154, 75%, 87%)',
900: 'hsl(152, 68%, 96%)'
},
olive: {
50: '#faf9f3',
100: '#f8efbb',
200: '#efdd80',
300: '#d7be69',
400: '#b3912a',
500: '#937215',
600: '#77590e',
700: '#5b430d',
800: '#3e2e0b',
900: '#2a1d09'
},
asparagus: {
50: '#f9f9f2',
100: '#f5efc4',
200: '#e7e08c',
300: '#c7bf58',
400: '#959831',
500: '#737a19',
600: '#5c6110',
700: '#48490f',
800: '#31320d',
900: '#211f0a'
},
seagreen: {
50: '#f3f6f4',
100: '#dfefeb',
200: '#b8e4d3',
300: '#81c8a8',
400: '#3fa779',
500: '#2c8b52',
600: '#26733c',
700: '#215831',
800: '#183c26',
900: '#11251c'
},
pine: {
50: '#f0f6f6',
100: '#d4eff4',
200: '#a4e4e8',
300: '#6cc8cb',
400: '#31a8a8',
500: '#238c85',
600: '#1f736b',
700: '#1c5854',
800: '#153c3d',
900: '#0e262c'
},
steel: {
50: '#f3f8f8',
100: '#dcf0f9',
200: '#b4e0f2',
300: '#82c1e0',
400: '#4c9dc9',
500: '#397db2',
600: '#306399',
700: '#284b78',
800: '#1d3356',
900: '#122039'
},
denim: {
50: '#f5f9fa',
100: '#e2f0fb',
200: '#c2dbf7',
300: '#96baea',
400: '#6994db',
500: '#5371cc',
600: '#4456b8',
700: '#364095',
800: '#262c6b',
900: '#161c44'
},
royalblue: {
50: '#f8fafa',
100: '#eceffa',
200: '#d9d6f6',
300: '#b8b1e9',
400: '#9c88da',
500: '#8364cd',
600: '#6c48b7',
700: '#523693',
800: '#382568',
900: '#20183e'
},
orchid: {
50: '#fafafa',
100: '#f3eff8',
200: '#e7d4f1',
300: '#ceacdf',
400: '#bc81c9',
500: '#a55db6',
600: '#8a429b',
700: '#683177',
800: '#482250',
900: '#2a162e'
},
blush: {
50: '#fcfbfa',
100: '#f9efed',
200: '#f4d2da',
300: '#e5a8b5',
400: '#dc7a8d',
500: '#ca576c',
600: '#b03c4e',
700: '#892d3a',
800: '#601f27',
900: '#3b1416'
},
chocolate: {
50: '#fcfbf8',
100: '#faefdb',
200: '#f4d6b5',
300: '#e5ad83',
400: '#d78056',
500: '#c15f35',
600: '#a54423',
700: '#7f331c',
800: '#592315',
900: '#38160e'
},
redditRed: '#FF4500',
redditNav: '#1A1A1B',
redditSearch: '#272729',
redditBG: '#141415'
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' }
},
hero: {
transform: 'translate3d(0px, 0px, 0px)'
}
},
animation: {
wiggle: 'wiggle 10s ease-in-out infinite',
hero: 'hero 1s ease-in-out infinite',
slowPing: 'pulse 10s cubic-bezier(0, 0, 0.2, 1) infinite'
},
width: {
82: '20.5rem',
100: '25rem',
200: '50rem',
'8xl': '96rem'
},
height: {
75: '75vh'
},
spacing: {
7: '1.75rem',
14: '3.5rem',
18: '4.5rem',
25: '6.25rem',
26: '6.5rem',
28: '7rem',
44: '11rem',
82: '20.5rem',
100: '25rem',
104: '26rem',
156: '39rem'
},
boxShadow: {
'outline-2': '0 0 0 2px var(--accents-0)',
'outline-normal': '0 0 0 2px var(--accents-2)',
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
cardHover:
'0 4px 4.1px rgba(0, 0, 0, 0.012),0 4.9px 5.8px rgba(0, 0, 0, 0.018),0 6.3px 8.4px rgba(0, 0, 0, 0.029),0 8.8px 12.9px rgba(0, 0, 0, 0.05),0 15px 23px rgba(0, 0, 0, 0.11)'
},
lineHeight: {
'extra-loose': '2.2'
},
scale: {
120: '1.2'
},
// https://tailwindcss.com/docs/font-size#providing-a-default-letter-spacing
fontSize: {
xxs: [
'0.50rem',
{
lineHeight: '0.75rem'
}
]
}
},
variants: {
padding: [
'responsive',
'group-hover',
'hover',
'focus',
'even',
'odd',
'first',
'last'
],
textColor: [
'responsive',
'group-hover',
'hover',
'focus',
'even',
'first',
'last',
'odd'
],
backgroundColor: [
'responsive',
'group-hover',
'hover',
'focus',
'even',
'first',
'last',
'odd'
],
display: ['responsive', 'hover', 'group-hover'],
visibility: ['responsive', 'hover', 'group-hover'],
transitionDuration: ['responsive', 'hover', 'group-hover'],
transitionTimingFunction: [
'responsive',
'hover',
'focus',
'group-hover'
],
gridColumn: ['responsive', 'hover', 'first', 'odd', 'even'],
extend: {
filter: ['responsive', 'hover', 'focus'],
ringWidth: [
'responsive',
'hover',
'active',
'focus',
'group-hover'
],
ringColor: [
'responsive',
'hover',
'active',
'focus',
'group-hover'
],
fontSize: ['responsive', 'last', 'first', 'hover', 'focus'],
stroke: ['responsive', 'hover', 'focus', 'group-hover'],
fill: ['responsive', 'hover', 'focus', 'group-hover'],
gridTemplateColumns: [
'responsive',
'last',
'first',
'hover',
'focus'
],
animation: [
'responsive',
'hover',
'focus',
'group-hover',
'motion-safe',
'motion-reduce'
],
transitionProperty: [
'responsive',
'hover',
'focus',
'motion-safe',
'motion-reduce'
],
transitionDelay: ['responsive', 'hover', 'focus'],
scale: [
'responsive',
'hover',
'focus',
'active',
'group-hover'
],
rotate: [
'responsive',
'hover',
'focus',
'active',
'group-hover'
]
}
}
},
plugins: [
require('tailwindcss-line-clamp'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio')
]
};
Then, in your base layer you set any variables defined in tailwind.config.js to their corresponding hex/rgb/hsl values. Once you import the base layer into the root file of your app (_app.js if using nextjs with a custom app, else index.js), it will work globally
The non-variable colors such as text-olive-300 will display a color widget next to them whereas the css variables such as text-secondary-0 will not.
./styles/base.css
@layer base {
#__next {
display: flex;
flex-direction: column;
min-height: 100vh;
}
:root {
--reddit-0: hsl(240, 2%, 8%);
--reddit-1: hsl(240, 2%, 10%);
--reddit-2: hsl(240, 3%, 16%);
--reddit-3: hsl(16, 100%, 50%);
--primary-0: hsl(209, 61%, 16%);
--primary-1: hsl(211, 39%, 23%);
--primary-2: hsl(209, 34%, 30%);
--primary-3: hsl(209, 28%, 39%);
--primary-4: hsl(210, 22%, 49%);
--primary-5: hsl(209, 23%, 60%);
--primary-6: hsl(211, 27%, 70%);
--primary-7: hsl(210, 31%, 80%);
--primary-8: hsl(212, 33%, 89%);
--primary-9: hsl(210, 36%, 96%);
--secondary-0: #d7be69;
--secondary-1: #486581;
--secondary-2: #9fb3c8;
--accents-0: hsl(195, 7%, 11%);
--accents-1: hsl(140, 2%, 26%);
--accents-2: hsl(0, 0%, 49%);
--accents-3: hsl(0, 0%, 64%);
--accents-4: hsl(0, 1%, 81%);
--accents-5: hsl(0, 0%, 89%);
--accents-6: hsl(50, 21%, 95%);
--theme-0: hsl(210, 24%, 84%);
--theme-1: hsl(209, 28%, 39%);
@apply overflow-x-hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Remove Safari input shadow on mobile */
textarea,
input:matches([type='email'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='url']) {
-webkit-appearance: none;
}
html {
height: 100%;
box-sizing: border-box;
touch-action: manipulation;
font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
/* -webkit-text-size-adjust: none; */
/* text-size-adjust: none; */
}
html,
body {
font-family: var(--font-sans);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--reddit-0);
color: var(--text-accents-6);
}
body {
position: relative;
min-height: 100%;
margin: 0;
scrollbar-width: 10px;
scrollbar-color: var(--secondary-0) var(--accents-7); /* scroll thumb and track */
}
body::-webkit-scrollbar {
display: thin; /* Hide scrollbar for Chrome, Safari and Opera https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
width: 10px;
}
body::-webkit-scrollbar-track {
background: var(--accents-7); /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: var(
--secondary-0
); /* color of the scroll thumb */
border-radius: 0px; /* roundness of the scroll thumb */
border: 3px var(--secondary-0); /* creates padding around scroll thumb */
}
a {
-webkit-tap-highlight-color: hsla(0, 0%, 0%, 0);
}
img {
/* Don't apply styles to next/image */
@apply m-0;
&.prose {
@apply m-0;
}
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
I separate the contents of each layer into individual css files within a styles directory then import them all into an index.css file which is imported into the root of my projects
./styles/components.css
@layer components {
.fit {
min-height: calc(100vh - 88px);
}
}
./styles/utilities.css
@layer utilities {
#tsparticles {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
}
#map {
height: 100%;
}
.skeleton {
display: block;
width: 100%;
border-radius: 5px;
background-image: linear-gradient(
270deg,
var(--reddit-0),
var(--reddit-2),
var(--reddit-2),
var(--reddit-0)
);
background-size: 400% 100%;
animation: loading 8s ease-in-out infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.landing-page-pagination-btn {
@apply m-3 relative inline-flex items-center px-4 py-2 border border-olive-300 text-sm font-medium rounded-md text-olive-300 bg-redditBG hover:bg-redditSearch;
}
.tooltip {
@apply invisible absolute transition-transform ease-in-out transform-gpu;
}
.has-tooltip:hover .tooltip {
@apply visible z-50 border-collapse rounded-lg bg-opacity-75 translate-x-3 -mt-2 text-xxs bg-redditBG text-opacity-0 my-auto p-2;
}
}
./styles/index.css
@import 'tailwindcss/base';
@import './base.css';
@import 'tailwindcss/components';
@import './components.css';
@import 'tailwindcss/utilities';
@import './utilities.css';
Then import ./styles/index.css into the root of your app
As for the postcss config required for this kind of setup, here are the contents of postcss.config.js
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'postcss-nesting',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3,
features: {
'custom-properties': false,
'nesting-rules': true
}
}
]
]
};
solution2
1 2021-05-24 23:09:40
In order to use the arbitrary value syntax (with the square brackets), you need to enable JIT mode and ensure you are on Tailwind 2.1 or greater. This will compile the CSS on-demand, which allows you to use the square bracket syntax and "break out" of your design system.
See the Tailwind docs for more info on JIT mode.
To enable JIT mode:
// tailwind.config.js
module.exports = {
mode: 'jit', // add this
purge: [
// ...
],
theme: {
// ...
}
// ...
}
solution3
1 2021-07-07 12:27:47
Update your tailwind.config.js file
Add (Just In Time) mode
module.exports = {
mode: 'jit', // Add Just In Time Mode
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
solution4
0 2021-11-26 07:51:10
Faced this issue in VsCode and came up with this solution
Tailwind 2.2.16 with NextJs 12.0.4
- Add the following to tailwind.config.js
module.exports = {
mode: 'jit'
}
- Add the following file in your project css_custom_data.json and paste code below
{
"version": 1.1,
"atDirectives": [
{
"name": "@tailwind",
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
}
]
},
{
"name": "@apply",
"description": "Use @apply to inline any existing utility classes into your own custom CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
}
]
},
{
"name": "@responsive",
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
}
]
},
{
"name": "@screen",
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
}
]
},
{
"name": "@variants",
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
}
]
}
]
}
- Go to settings.json in vscode (cmd+,) and add the following rule
"css.customData": ["./css_custom_data.json"]
This worked for me
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
not able to use custom classes in @apply in scss file tailwind nextjs project?
How to use custom CSS colors in my tailwind preset?
Tailwind css - use className custom spacing value as variable for tailwind config
Tailwind CSS: How to use custom percentages in padding?
Tailwind CSS responsive behavior on nextjs app
Not able to use this custom font in css
How to use layout responsive with Nextjs and tailwind?
Tailwind CSS - Extend Colors - Named Color Different?
Django tailwind custom arbitrary colors not working
Custom CSS Support for NextJS
Related Tags