質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

Q&A

解決済

1回答

371閲覧

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

chibahir0514

総合スコア8

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

0グッド

0クリップ

投稿2023/12/21 10:11

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

実現したいこと

ソース「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」等に設定しても、反映がされない次第です。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

javascript

1//tailwind.config.js 2const { createTailwindConfig } = require("@charcoal-ui/tailwind-config"); 3 4module.exports = { 5 darkMode: true, 6 content: ["./src/**/*.tsx", "./src/**/*.html"], 7 // コメントアウトして試す 8 // presets: [ 9 // createTailwindConfig({ 10 // version: "v3", 11 // theme: { 12 // ":root": light, 13 // }, 14 // }), 15 // ],

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

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

html

1<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

javascript

1//tailwind.config.js 2module.exports = { 3 // ... 4 theme: { 5 extend: { 6 spacing: { 7 '17': '17px', // 希望のサイズに設定 8 },

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

html

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

投稿2023/12/22 09:19

編集2023/12/22 09:22
KT001

総合スコア643

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chibahir0514

2023/12/22 11:09

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問