【Tailwind CSS】とりあえず基本的なcssファイルを作ってみる

npmを使います。まだインストールされていない方は下記をご覧ください。

Tailwind CSSをインストール

①Windowsキー(旗マーク)+Rをクリックします。ファイル名を指定して実行が開きます。

画面キャプチャ引用元:Windows10

②「cmd」と入力し、「OK」をクリックします。コマンドプロンプトが開きます。

③「npm install tailwindcss –save-dev」と入力し、Enter。

インストール完了です。

Tailwindのcss作成

下記だけを記述した「style.css」をTailwind CSSのインストールを行ったディレクトリ配下に置きます。
※コマンドプロンプトがうまく動作しない場合は、ファイルの置き場所に原因があるかもしれませんので、ご確認ください

@tailwind base;

@tailwind components;

@tailwind utilities;

次にコマンドプロンプトで「cd C:\Users\test\tailwind」を入力しEnterを押して、ファイルを置いた場所に移動します。
※例として、「C:\Users\test\tailwind」に「style.css」を置いています

画面キャプチャ引用元:Windows10 コマンドプロンプト npxを使用

最後に、コマンドプロンプトで「npx tailwind build style.css -o output.css」と入力しEnterを押すと、「output.css」ファイルが同フォルダに作成されます。成功すると上の画像のように表示されます。

画面キャプチャ引用元:TailWindのcss by Atom

これで「Tailwind CSS」を使用できそうです。それでは、ドキュメントを見ながらサイト構築してみます。