Table of Contents
最低限トップページをVuePressで表示させる
VuePressでトップページを表示させる手順は公式ドキュメントに沿って行ってください。
この時点でのディレクトリ構成は以下の通りです。
|
1 2 3 4 |
. ├── docs │ ├── README.md ├── package.json |
Tailwind CSSの導入
手順は基本的にTailswind CSSの公式ドキュメントに記載された通りです。
- npm or yarnでTailwind CSSをインストールする
ルートディレクトリで以下コマンドを実行
|
1 2 3 4 5 |
# Using npm npm install tailwindcss # Using Yarn yarn add tailwindcss |
- ./docs/.vuepress/styles/index.styl を作成
|
1 2 3 |
mkdir ./docs/.vuepress mkdir ./docs/.vuepress/styles touch ./docs/.vuepress/styles/index.styl |
ちなみに、上記ディレクトリ構成でindex.stylを配置すると、vuepressが自動的にindex.stylを認識、デフォルトのCSSファイルとして扱ってくれます。
この時点でのディレクトリ構成は以下の通りです。
|
1 2 3 4 5 6 7 |
. ├── docs ├── README.md ├── .vuepress ├── styles ├── index.styl ├── package.json |
- ./docs/.vuepress/styles/index.styl に Tailwind CSSの設定を追加
./docs/.vuepress/styles/index.styl に以下を追加
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
自分で全体に効かせるCSSを書きたいときは、 @tailwind components; と @tailwind utilities; の間に記述しましょう。
|
1 2 3 4 5 6 |
@tailwind base; @tailwind components; （ここにCSSを記述） @tailwind utilities; |
- ./docs/.vuepress/config.js を作成して設定を追加
|
1 |
touch ./docs/.vuepress/config.js |
./docs/.vuepress/config.js の内容を以下の通りにします。
|
1 2 3 4 5 6 7 8 |
module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ] } |
|
1 2 3 4 5 6 7 8 |
. ├── docs ├── README.md ├── .vuepress ├── styles ├── index.styl ├── config.js ├── package.json |
- サーバーを再起動して確認
もしサーバーを起動している状態なら再起動しましょう。
これでVuePressでTailwind CSSが使えるようになりました！