---
title: "ヘッドレスサイトをTailwindを使用するように設定してください"
slug: "configure-headless-sites-to-use-tailwind"
abstract: "Tailwindグリッドシステムを使うためにサイトを設定する方法を学びましょう。"
---
# ヘッドレスサイトをTailwindを使用するように設定してください

基本的なサイトを作成する際、デフォルトではBootstrap 5グリッドシステムを使用します。Tailwindグリッドシステムを使用したい場合は、空のサイトを作成し、そのサイトのグリッド設定で*Tailwind*を使いたいと指定する必要があります。スターターキットを使う場合や自社のコードを使う場合は、フロントエンドコードにtailwindとそのCSSクラスのサポートを追加する必要があります。

> !注Tailwind、例えばCSSクラスの詳細については、[https://tailwindcss.com/docs/](https://tailwindcss.com/docs/) を参照してください。

サイトをTailwindに設定するには:

1.  ダッシュボードやコンテンツエディターで空のサイトを作成します。
    
    > !重要コンテンツエディターを使用している場合、「新しいヘッドレスサイトを作成する」ダイアログボックスの「Basic site」チェックボックスをクリアする必要があります。
    
2.  コンテンツエディターを開き、コンテンツツリーで作成したサイトの設定に移動してください。
    
3.  **グリッドマッピング**フィールドで*Tailwind*を選択します。
    
    ![headless-site-enable-tailwind.png](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/headless-site-enable-tailwind.png)
    
4.  変更を保存してください。