TailwindCSS_1st

概要

TailwindCSSを使ったwebページ作成を行う。
他にフレームワーク等は使わないで行う。

環境構築

1. package.jsonを初期化する。
   npm init -y
   

2. TailwindCSSをインストールする。
   npm i -D tailwindcss
   

3. tailwind.config.jsを作成する。(カスタムデザインに使用する。)
   npx tailwindcss init
   

4. テンプレートパスを設定する。
   tailwind.config.jsに下記のパスへ設定する。
   content: ["./src/**/*.{html,js}"],
   

5. src/input.cssの作成をする。
   mkdir src
cd src
touch input.css
   

6. input.cssにTailwindディレクティブを追加する。
   @tailwind base;
@tailwind components;
@tailwind utilities;
   

7. package.jsonのデバッグscripts内に下記を追記する。
   "build":"npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
   

8. Tailwind CLIビルドプロセスを開始する
   cd ../
npm run build
   dist/output.cssが作成される。(input.cssをコンパイルしたもの。)