😊

【フロント_2日目】Tailwind CSS_1冊目

2024/08/20に公開

Tailwind CSS

tech

こんにちは投資ロウトです。

背景

・諸事情があり、急いでTailwind CSSを学ぶ必要性に迫られています。
※Dockerも早急に学ぶ必要があり、並行で進めていきます。
※他の優先順位でstopする可能性あり

導入

ライブラリを導入する

npm install -D tailwindcss

プロジェクト内にTailwindCSS設定ファイルを作成(tailwind.config.jsが生成される)

npx tailwindcss init

src/xxx.css これをかくと、Tailwind CSSのCSSのノーマライズや、ユーティリティクラスなどのルール群が入るとのこと。

@tailwind base;
@tailwind components;
@tailwind utilities;

こうして以下を実行すると、cssファイルが生成されるとのこと。

npx tailwindcss --input ./src/xxx.css --output ./dist/main.css

Tailwind CSSのヘルプ

npx tailwindcss --help

Tailwind CSSをPostCSSのプラグインの一種とみなし、PostCSSを用いてビルドする仕組みに載せる方法

npm install -D tailwindcss postcss
npx tailwindcss init --postcss

こちらで、postcss.config.jsも作成される

PostCSS CLIでビルドする

npm i -D postcss postcss-cli
npx postcss src/input.css --output dist/output.css

またCSSに書かれた@import文を解釈するために、以下をインストールするとのこと

npm install -D postcss-loader css-loader mini-css-extract-plugin

webpack(※1)を用いる場合

npm install -D webpack webpack-cli

webpackでビルドするとのこと

npx webpack --progress

(※1)webpackとは・・・javascriptモジュールを束ねることができるツールとのこと

viteとは・・・従来のビルドツールの課題や問題点を改善し、モダンな開発環境に対応した全く新しいビルドツール

設定ファイル

TailwindCSSはカスタマイズをすることを前提に作られているので、プロジェクトに沿ったデザイン等の設定も行えるとのことでした。

またそれはtailwind.config.jsのファイルに記載するとのこと。

# 例
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8',
        secondary: '#9333EA',
      },
    },
  },
}

※これらにjsが含まれるのは、javascriptで動的につけ外しするような場合のためということみたいです。

その他

Tailwind CSSで生成するクラスが他のクラスに上書かれないようにするには、下記設定を入れる

# tailwind.config.js
module.exports = {
　　important: true,
}

と短いですが以上で学習を区切りたいと思います。ご精読ありがとうございました。焦らずコツコツ頑張っていきたいと思います。

背景

導入

設定ファイル

その他

Discussion