【tailwindcss】Configuration error:Could not locate module ./App.css mapped as:identity-obj-proxy.

# はじめに
tailwindcssをViteプロジェクトに適用後、テスト実行したところ表題のエラーが発生しました。

# 問題
ドキュメントに従ってtailwindcssを導入後、Jestを実行すると下記のエラーが発生する。

```
Configuration error:
    Could not locate module ./App.css mapped as:
    identity-obj-proxy.
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/\.(css|less)$/": "identity-obj-proxy"
      },
      "resolver": undefined
    }
```

# 原因
`jest.config.mjs`で定義している`moduleNameMapper`にscssやsassが含まれていなかったため

JestはNode.js環境で動作するため、CSSを理解できないとのこと。
そのため、`identity-obj-proxy`ライブラリを使い、CSSモジュールをモックとして返していました。

tailwindcssでは直接CSSファイルを使用するため、`scss`や`sass`の拡張子も対象となります。scssやsassを使用した場合、Jestはモック化できないよとのエラーが発生していました。
（これまでChakaUIを使用していましたが、ChakaUIはCSS-in-JSの仕組みでスタイルをJavaScriptとして処理しているため、エラーが発生していなかったようです。）

# 解決方法
jestの設定を修正、identity-obj-proxyをインストールする

```diff_javascript:jest.config.mjs
export default {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["./jest.setup.ts"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
-    "\\.(css|less)$": "identity-obj-proxy",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};
```

`identity-obj-proxy`のインストールも忘れずに行う
```shell
npm install --save-dev identity-obj-proxy
```

# 別のエラーが発生
上記でエラーは解消したものの別のエラーが発生しました。
<details><summary>エラー</summary>


```
test@asa:~/jisou/workspace/addiless-alcohol-app$ npm run test

> addiless-alcohol-app@0.0.0 test
> jest --verbose

  console.error
    Received `true` for a non-boolean attribute `text-3xl`.

    If you want to write it to the DOM, pass a string instead: text-3xl="true" or text-3xl={value.toString()}.

      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `font-bold`.                                       
                                                                                                   
    If you want to write it to the DOM, pass a string instead: font-bold="true" or font-bold={value.toString()}.                                                                                      
                                                                                                   
      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)                                                                                         
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `text-3xl`.

    If you want to write it to the DOM, pass a string instead: text-3xl="true" or text-3xl={value.toString()}.

      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `font-bold`.                                       
                                                                                                   
    If you want to write it to the DOM, pass a string instead: font-bold="true" or font-bold={value.toString()}.                                                                                      
                                                                                                   
      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)                                                                                         
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `text-3xl`.

    If you want to write it to the DOM, pass a string instead: text-3xl="true" or text-3xl={value.toString()}.

      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `font-bold`.                                       
                                                                                                   
    If you want to write it to the DOM, pass a string instead: font-bold="true" or font-bold={value.toString()}.                                                                                      
                                                                                                   
      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)                                                                                         
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `text-3xl`.

    If you want to write it to the DOM, pass a string instead: text-3xl="true" or text-3xl={value.toString()}.

      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)      

  console.error
    Received `true` for a non-boolean attribute `font-bold`.                                       
                                                                                                   
    If you want to write it to the DOM, pass a string instead: font-bold="true" or font-bold={value.toString()}.                                                                                      
                                                                                                   
      at validateProperty (node_modules/react-dom/cjs/react-dom-client.development.js:3078:27)     
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom-client.development.js:3154:9) 
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom-client.development.js:17117:9)                                                                                         
      at setInitialProperties (node_modules/react-dom/cjs/react-dom-client.development.js:17741:7) 
      at completeWork (node_modules/react-dom/cjs/react-dom-client.development.js:11391:18)        
      at runWithFiberInDEV (node_modules/react-dom/cjs/react-dom-client.development.js:1522:13)    
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15268:19)  
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom-client.development.js:15149:11)   
      at workLoopSync (node_modules/react-dom/cjs/react-dom-client.development.js:14956:41)        
      at renderRootSync (node_modules/react-dom/cjs/react-dom-client.development.js:14936:11)      
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom-client.development.js:14419:13)   
      at performWorkOnRootViaSchedulerTask (node_modules/react-dom/cjs/react-dom-client.development.js:16216:7)
      at performWorkUntilDeadline (node_modules/scheduler/cjs/scheduler.development.js:45:48)      
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:520:19) 
```

</details>

tailwindcssのクラスを属性として直接使用していたことが原因
クラスをclassName属性として正しく設定したところ解決しました。

```diff_tsx
function App() {
　　　　　　// 省略
  return (
    <>
-      <h1 text-3xl font-bold data-testid="title" onClick={() => getData()}>
+      <h1
+        className="text-3xl font-bold"
+        data-testid="title"
+        onClick={() => getData()}
+      >
    </>
}
```

# おわりに
初めてtailwindcssを導入してみました。公式ドキュメントで導入はスムーズにできたものの、実際にcssを適用するのは難しそうです。新しいエラーに会えることを楽しみにしています。

# 参考
https://tailwindcss.com/docs/adding-custom-styles#using-css-and-tailwind

https://jestjs.io/ja/docs/webpack#css%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E3%83%A2%E3%83%83%E3%82%AF