

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

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

[code]

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
[/code]

[code]

    <!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>
    
[/code]

tailwind.cssconfig.js

[code]

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

package.json

[code]

    {
      "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"
      }
    }
    
[/code]

postcss.config.js

[code]

    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    }
    
[/code]

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

[code]

    PS C:\Users\alfre\OneDrive\デスクトップ\tailwind.css> npm run bulid
    Debugger attached.
    
    > tailwind.css@1.0.0 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...
    
[/code]


CC BY-SA 4.0
2023-03-11T13:04:07.500
94131
2023-03-27T05:14:03.623
2023-03-14T00:35:06.630
3060
57482
question
tailwindcss postcss
tailwindcss postcssのプラグインについて


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

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

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


CC BY-SA 4.0
2023-03-27T05:14:03.623
94340
2023-03-27T05:14:03.623
57705
94131
answer