TailWind CSS

[shari-sushi]

ポートフォリオにてTailWind CSSを導入したところ、予期せぬ不具合が発生した。

• npm run dev時は機能しない。
• npm start, npm run start 時は機能する。
• 通常のcssは常に機能する。

npm run dev時(開発者モード時)のホットリロードの恩恵をTailWind CSSでもあやかりたい。

---

[shari-sushi]

以下、特記なければこの記事に従っている。 https://zenn.dev/chris_d_k/articles/25d8618ade9c09

\my-app> npm install -D tailwindcss@latest postcss@latest 
autoprefixer@latest

added 1 package, changed 2 packages, and audited 346 packages in 2s

120 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
\my-app> npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
postcss.config.js already exists.

以上のコマンドを実行し、その時点でのディレクトリが↓

[shari-sushi]

以下エラーが発生しており、 https://zenn.dev/shimotaroo/articles/c8f2e751cd7877 の方法を実施。したところ解消

Parsing error: Cannot find module 'next/babel'
Require stack:
- (略)\my-app\node_modules\next\dist\compiled\babel\bundle.js
- (略)\my-app\node_modules\next\dist\compiled\babel\eslint-parser.js
- (略)\my-app\node_modules\eslint-config-next\parser.js
- (略)\my-app\node_modules\@eslint\eslintrc\dist\eslintrc.cjs

Make sure that all the Babel plugins and presets you are using
are defined as dependencies or devDependencies in your package.json
file. It's possible that the missing plugin is loaded by a preset
you are using that forgot to add the plugin to its dependencies: you
can workaround this problem by explicitly adding the missing package
to your top-level package.json.

next/babeを対象にしたことが効いてるのか？ https://zenn.dev/januswel/articles/402774d76424e71ac906

extends は設定を流用するためのものです。効果的に ESLint を設定する上で必須となっています。

(リンク先読んでない)

[shari-sushi]

元記事に従い、 \my-app\src\style\global.cssを作成し、 (本来あるものなのか？)

@tailwind base;
@tailwind components;
@tailwind utilities;

↓のエラーが３つ(ポートフォリオではエラー無いのに…)

Unknown at rule @tailwind

https://tailwindcss.com/をインストール

C:\Users(user名)\AppData\Roaming\Code\User\settings.json (ファイル/ユーザー設定/設定 →setting.jsonで検索) に

  "files.associations": {
    "*.css": "tailwindcss"
  }

追記でエラー解消

[shari-sushi]

npm run dev

index.tsxに↓を記入

<h1 className="text-3xl font-bold underline">
    h1タグ: You can use Tailwind
</h1>
<a className="text-3xl  underline">
    aタグ: You can use Tailwind
</a>

結果

TailWind CSSが働いている感じではない。

[shari-sushi]

npm run build, npm run devしてみる。

ちょっと関係無いエラー発生

``` \my-app> npm run build > my-app@0.1.0 build > next build ▲ Next.js 14.0.2 - Environments: .env.production, .env ✓ Creating an optimized production build ✓ Compiled successfully Linting and checking validity of types .. ⨯ ESLint: Failed to load config "prettier" to extend from. Referenced from: 略\my-app\.eslintrc.json ✓ Linting and checking validity of types ✓ Collecting page data > Build optimization failed: found pages without a React Component as default export in pages/player/react-player7 pages/test See https://nextjs.org/docs/messages/page-without-valid-component for more info. ``` ``` \my-app> npm run start > my-app@0.1.0 start > next start ▲ Next.js 14.0.2 - Local: http://localhost:3000 [Error: ENOENT: no such file or directory, open '略\my-app\.next\BUILD_ID'] { errno: -4058, code: 'ENOENT', syscall: 'open', path: '略\my-app\\.next\\BUILD_ID' ``` https://stackoverflow.com/questions/61597932/eslint-couldnt-find-the-config-prettier-to-extend-from ``` \my-app> npm install --save-dev eslint-config-prettier added 1 package, and audited 347 packages in 3s 120 packages are looking for funding run `npm fund` for details found 0 vulnerabilities \my-app> npm install --save-dev eslint-plugin-prettier added 6 packages, and audited 353 packages in 5s 124 packages are looking for funding run `npm fund` for details found 0 vulnerabilities 略\my-app> npm run build > my-app@0.1.0 build > next build ▲ Next.js 14.0.2 - Environments: .env.production, .env ✓ Creating an optimized production build ✓ Compiled successfully Linting and checking validity of types . ⨯ ESLint: Failed to load config "next/babel" to extend from. Referenced from: 略\my-app\.eslintrc.json ✓ Linting and checking validity of types ✓ Collecting page data > Build optimization failed: found pages without a React Component as default export in pages/player/react-player7 pages/test See https://nextjs.org/docs/messages/page-without-valid-component for more info. ``` pages/player/react-player7 pages/test を削除して無事ビルド、スタート ※ESLintのエラーは直せなかった ---

え、こっちではnpm run start時でも働かないじゃん

[shari-sushi]

色々いじった　https://github.com/sharin-sushi/V-Kara-Lists/issues/87　後に コードを戻したら、期待通りに動くようになった

npm install とかしたのが効果あった？