1

tailwindcssを用いたやり方を勉強すべくYouTubeで"しまブーのit大学"というチャンネルの"【Tailwind CSS #3】4つのインストール方法の紹介。オススメはPostCSSのプラグインとして使う方法。"という動画を参考に挑戦しているのですが、cssのスタイルが反映されません。 

ブラウザーから見てみるとしっかり読み込まれてはいるのですが、反映されていません。理由がまったくわからないので、コードを貼るのでご教授よろしくお願いします。

@tailwind base;
@tailwind components;
@tailwind utilities;
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="dist.css">
  <title>Document</title>
</head>

<body>
  <h1 class="text-5xl text-blue-900">hello tailwindcss</h1>

</body>

</html>

tailwind.cssconfig.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json

{
  "name": "tailwind.css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bulid": "postcss style.css -o dist.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss-cli": "^10.1.0",
    "tailwindcss": "^3.2.7"
  },
  "dependencies": {
    "cli": "^1.0.1"
  }
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

dist.cssに記入された量が多かったのでターミナルの文を載せます。

PS C:\Users\alfre\OneDrive\デスクトップ\tailwind.css> npm run bulid
Debugger attached.

> [email protected] bulid     
> postcss style.css -o dist.css

Debugger attached.

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

1 件の回答 1

1

私も同じ動画を見て学習した者です。

ターミナルに「The content option in your Tailwind CSS configuration is missing or empty.」とあるようにcontentオプション部分が空なのが原因かと思われます。

公式にもありますが、v3からcontent部分にパスの記述が必要です。
https://tailwindcss.com/docs/content-configuration

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。