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...