ChatVRMにてcharcoalを適用したTailwindCSSが動かない

Question

質問失礼いたします。
このような質問をして大変恐縮ですが、なかなか解決できず皆様にお伺いさせていただければと存じます。

実現したいこと

ソース「ChatVRM」
https://github.com/pixiv/ChatVRM

こちらを元に開発しております。
TailwindCSSのピクシブさんが作られたcharcoalが使用されています。

発生している問題・エラーメッセージ

「npm run dev」でローカル起動している際、最初に設定されている以外のTailwindCSSのクラスが適用されません。

例えば
src\components\githubLink.tsxの12行目

<div className="p-16 rounded-16 bg-[#1F2328] hover:bg-[#33383E] active:bg-[565A60] flex">

こちらの「p-16」を「p-17」等に設定しても、反映がされない次第です。

申し訳ございません、よろしくお願いいたします。

Answer 1

ご指摘の通り、Charcoal側の設定かと思います。

例えば、（tailwind.config.jsの）以下の部分をコメントアウトして試したら、Tailwind CSS公式のp-1などが使えるようになりました。

//tailwind.config.js
const { createTailwindConfig } = require("@charcoal-ui/tailwind-config");

module.exports = {
  darkMode: true,
  content: ["./src/**/*.tsx", "./src/**/*.html"],
  // コメントアウトして試す
  // presets: [
  //   createTailwindConfig({
  //     version: "v3",
  //     theme: {
  //       ":root": light,
  //     },
  //   }),
  // ],

ただし、コメントアウトするとCharcoal側で定義しているものが、使えなくなってしまします。

このため、一度限りの記述であれば、以下のような記述をご利用ください。

<div className="p-[17px] rounded-16 bg-[#1F2328] hover:bg-[#33383E] active:bg-[565A60] flex">

※ p-17はCharcoalにも、Tailwind CSSにもないため、希望のサイズをご利用ください

Charcoal側では、p-16は「padding: 16px」で定義されています。
https://pixiv.github.io/charcoal/?path=/docs/tailwind-config-spacing--docs
Tailwind CSS公式では、p-16は「padding: 4rem; /* 64px */」で定義されています。
https://tailwindcss.com/docs/padding

---

もし、何度も使うような場合は、カスタムスペースを定義ください。
https://tailwindcss.com/docs/customizing-spacing

//tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      spacing: {
        '17': '17px', // 希望のサイズに設定
      },

カスタムスペースを定義すると、p-17が使えるようになります。

<div className="p-17 rounded-16 bg-[#1F2328] hover:bg-[#33383E] active:bg-[565A60] flex">

Comments

[chibahir0514]

大変ご丁寧にありがとうございます。
こちらで動作確認することができました、引き続き実装を進めていきたいと思います。