✨

DjangoでTailwindCSSを使用する方法

2022/03/02に公開

django

Tailwind CSS

tech

Django で TailwindCSS を使用する方法を紹介します。

TailwindCSS を CDN から読み込むと、すべてのクラスが読み込まれるので、とても重くなってしまいます。

この方法を実行すると、軽量化した TailwindCSS を読み込むことができるようになります。

ぜひ参考にしてください。

動画解説

https://youtu.be/Piew13LGj_o

Django プロジェクト準備

ますは Django のプロジェクトを用意してください

static フォルダ作成

トップディレクトリに static/css フォルダを作成します。

mkdir static
mkdir static/css

tailwind.css ファイル作成

tailwind.css ファイルを作成します。

static/css/tailwind.css

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

settings 変更

static フォルダのディレクトリを設定します。

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

tools フォルダ作成

mkdir tools
cd tools

node/npm 確認

node と npm がインストールされていることを確認します。

node -v
npm -v

tailwindcss インストール

tools 内で tailwindcss をインストールします。

npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p

package.json 変更

package.json の scripts を変更します。

package.json

"scripts": {
    "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"
  },

tailwind.config.js 変更

tailwind.config.js を下記のように変更します。

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    enabled: false,
    content: ['../**/templates/*.html', '../**/templates/**/*.html'],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

これで TailwindCSS を使用する準備は完了です。

TailwindCSS

それでは index.html で tailwindcss を使用してみましょう。

こちらのチートシートを見ると楽になります。

開発環境で構築するときは、Play CDN を使ってコーディングしていきます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>DjangoでTailwindCSSを使用する方法</title>
  </head>
  <body>
    <div class="text-center m-5">
      <div class="bg-yellow-400 p-5 inline-block rounded">
        <div class="text-3xl font-bold">DjangoでTailwindCSSを使用する方法</div>
      </div>
    </div>
  </body>
</html>

tailwindcss ビルド

本番環境にデプロイしたい時に、下記コマンドを実行して、tailwindcss ファイルを出力します。

cd tools
npm run build
cd ../

style.min.css 読み込み

cdn をコメントアウトして、build で出力した style.min.css ファイルを読み込みます。

{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.min.css' %}" />
    <title>DjangoでTailwindCSSを使用する方法</title>
  </head>
  <body>
    <div class="text-center m-5">
      <div class="bg-yellow-400 p-5 inline-block rounded">
        <div class="text-3xl font-bold">DjangoでTailwindCSSを使用する方法</div>
      </div>
    </div>
  </body>
</html>

動作確認

runserver して、tailwindcss が適応されているか確認します。

以上で、Django で TailwindCSS を使用する方法の紹介は終了です。

ぜひ tailwindcss を使用して、きれいなデザインを作ってみてください。

Django 中心 Q&A サイト

講座の不明点や個人開発の疑問点など、何でもご質問ください。

会員登録しておくと、新着の講座情報が届きます。

よろしくお願いします。