JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box test1">
  <p>「どうしても行頭の約物が全角なのが許せないんだ」</p>
  <p>游ゴシックはつねづねそう言っていた。僕もそう思う。</p>
  <p>【つまり】</p>
  <p>『これは』</p>
  <p>［戦争なんだよ］</p>
  <p>でも段落の先頭文字はＣＳＳでなんとかなっても、段落内で改行したところには今の所ＣＳＳだけでは対応不可能なんだよね。<br>
 「そんなぁ」みたいな顔をされもね、ＣＳＳにそういうことを期待するのがそもそもね。<br>
【おこがまＣＳＳ】って言うらしいよ、そういうの。</p>
  <p>あ）いうえお</p>
  <p>「「」」ＴＫＧ</p>
  <p>「Ｔ」「Ｋ」「Ｇ」</p>
  <p>！＠＃％＆＊（）『』“”・？あいうえも</p>
  <p>！＠＃％＆＊（）『』“”・？＄あいうえも</p>
</div>

<div class="box test2">
  <p>「どうしても行頭の約物が全角なのが許せないんだ」</p>
  <p>游明朝はつねづねそう言っていた。僕もそう思う。</p>
  <p>【つまり】</p>
  <p>『これは』</p>
  <p>［戦争なんだよ］</p>
  <p>でも段落の先頭文字はＣＳＳでなんとかなっても、段落内で改行したところには今の所ＣＳＳだけでは対応不可能なんだよね。<br>
 「そんなぁ」みたいな顔をされもね、ＣＳＳにそういうことを期待するのがそもそもね。<br>
【おこがまＣＳＳ】って言うらしいよ、そういうの。</p>
  <p>あ）いうえお</p>
  <p>「「」」ＴＫＧ</p>
  <p>「Ｔ」「Ｋ」「Ｇ」</p>
  <p>！＠＃％＆＊（）『』“”・？あいうえも</p>
  <p>！＠＃％＆＊（）『』“”・？＄あいうえも</p>
</div>

<div class="box test3">
  <p>「どうしても行頭の約物が全角なのが許せないんだ」</p>
  <p>ヒラギノ角ゴ ProNはつねづねそう言っていた。僕もそう思う。</p>
  <p>【つまり】</p>
  <p>『これは』</p>
  <p>［戦争なんだよ］</p>
  <p>でも段落の先頭文字はＣＳＳでなんとかなっても、段落内で改行したところには今の所ＣＳＳだけでは対応不可能なんだよね。<br>
 「そんなぁ」みたいな顔をされもね、ＣＳＳにそういうことを期待するのがそもそもね。<br>
【おこがまＣＳＳ】って言うらしいよ、そういうの。</p>
  <p>あ）いうえお</p>
  <p>「「」」ＴＫＧ</p>
  <p>「Ｔ」「Ｋ」「Ｇ」</p>
  <p>！＠＃％＆＊（）『』“”・？あいうえも</p>
  <p>！＠＃％＆＊（）『』“”・？＄あいうえも</p>
</div>

CSS

body {display: flex;justify-content: space-between;}.box {;margin: 1em;border: 1px solid purple;line-height: 1;background-image: linear-gradient(to right, rgba(0,0,0, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0, 0.15) 1px, transparent 1px);background-size: 1em auto, auto 1em;background-position: 0 -1px;}

p::first-letter {
  /* font-feature-settings: "palt"; */
  color: red;
  background-color: rgba(255,255,128, 0.3);
}

.test1 {font-family: "游ゴシック","YuGothic",YuGothic;}
.test2 {font-family: "游明朝","YuMincho",YuMincho;}
.test3 {font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN";}

@font-face {
  font-family: "YuGothicYH";
  font-feature-settings: "palt";
  src: local("游ゴシック"),local("YuGothic-Medium"),local("Yu Gothic Medium"),local("YuGothic-Regular"),local("YuGothic"),local(YuGothic);
}
@font-face {
  font-family: "YuMinchoYH";
  font-feature-settings: "palt";
  src: local("游明朝"),local("YuMincho-Medium"),local("Yu Mincho Medium"),local("YuMincho-Regular"),local("YuMincho"),local(YuMincho);
}
@font-face {
  font-family: "HiraginoYH";
  font-feature-settings: "palt";
  src: local("ヒラギノ角ゴシック ProN"),local("Hiragino Kaku Gothic ProN");
}

.test1 p::first-letter {font-family: "YuGothicYH";}
.test2 p::first-letter {font-family: "YuMinchoYH";}
.test3 p::first-letter {font-family: "HiraginoYH";}