How to fix Tailwind CSS colors not work in Next.js All In One
<h1 id="how-to-fix-tailwind-css-colors-not-work-in-nextjs-all-in-one">How to fix Tailwind CSS colors not work in Next.js All In One</h1><blockquote>
<p>Tailwind CSS & Next.js 13</p>
</blockquote>
<h2 id="error">error</h2>
<pre><code class="language-js">import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'custom-green': '#7e22ce',
'custom-color': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#00ff00',// #7e22ce
800: '#155e75',
900: '#164e63',
},
// ...
},
},
plugins: [],
}
export default config
</code></pre>
<pre><code class="language-tsx">async function Page() {
const data = await getData({ id: 1});
const {
id,
article,
} = data.props;
return (
<div className="flex-column items-center justify-center p-6">
<div className="m-6">Page article id = {id}</div>
<div className="m-6 custom-green">custom-green ❌</div>
<div className="m-6 border-red-500 custom-color-700">{JSON.stringify(article)}❌</div>
</div>
);
}
export default Page;
</code></pre>
<h2 id="solution">solution</h2>
<pre><code class="language-js">// tailwind.config.js
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
</code></pre>
<p>By default these colors are automatically shared by the textColor, borderColor, and backgroundColor utilities, so the above configuration would generate classes like .<code>text-indigo</code>, .<code>border-blue</code>, and .<code>bg-red</code>.</p>
<p>https://v1.tailwindcss.com/docs/customizing-colors</p>
<h2 id="demos">demos</h2>
<p>http://localhost:3000/article</p>
<pre><code class="language-js">import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'custom-green': '#7e22ce',
'custom-color': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#00ff00',// #7e22ce
800: '#155e75',
900: '#164e63',
},
// ...
},
},
plugins: [],
}
export default config
</code></pre>
<pre><code class="language-tsx">async function Page() {
const data = await getData({ id: 1});
const {
id,
article,
} = data.props;
return (
<div className="flex-column items-center justify-center p-6">
<div className="m-6">Page article id = {id}</div>
<div className="m-6 custom-green">custom-green ❌</div>
<div className="m-6 text-custom-green">text-custom-green ✅</div>
<div className="m-6 border-red-500 text-custom-color-700">{JSON.stringify(article)}</div>
</div>
);
}
export default Page;
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/740516/202309/740516-20230914012901405-89180584.png" alt="image" loading="lazy"></p>
<h2 id="--反爬虫测试打击盗版️如果你看到这个信息-说明这是一篇剽窃的文章请访问-httpswwwcnblogscomxgqfrms-查看原创文章"><div id="anti-crawler" style="color: rgba(255, 0, 0, 1)"> (🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！</div></h2>
<h2 id="refs">refs</h2>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2021</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/17701255.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/17701255.html
頁:
[1]