Tailwind CSS Academy · レッスン

tailwind.config.jsの構成

設定ファイルのcontent、theme、extend、plugins、presetsの各セクションと、それらがコンパイルに及ぼす影響を理解します。

レッスン 1/413 ステップ

「tailwind.config.jsの構成」はCoddyKit上の無料Tailwind CSS Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why a Config File Exists

Tailwind CSS is designed to be customizable at its core. The tailwind.config.js file is the single source of truth for all customizations to the default design system. Without it, you get Tailwind's sensible defaults. With it, you can redefine any part of the design system — colors, fonts, spacing, breakpoints, animations, and more — while still generating the full utility class API automatically.

Generating the Config File

Create a default config file by running npx tailwindcss init. This generates a minimal tailwind.config.js with empty stubs for the most common sections. Use npx tailwindcss init --full to generate a complete config that includes every default value — useful for reference but usually too verbose to work with day-to-day.

# Generate a minimal config
npx tailwindcss init

# Generate a full config showing all defaults
npx tailwindcss init --full

# Generate config + postcss.config.js together
npx tailwindcss init -p

The content Section

The content array tells Tailwind where to look for class names so it can include only the utilities your project actually uses. You provide glob patterns pointing to your HTML, JS, JSX, TSX, Vue, and any other files that contain Tailwind classes. Getting this right is critical — missing a file means its classes get purged from the production build.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  // ...
};

The theme Section

The theme section contains all design token configurations: colors, spacing, typography, breakpoints, shadows, border radii, and more. You can either extend the defaults (adding new values alongside existing ones) or override them (replacing defaults entirely). The theme object mirrors Tailwind's internal structure, where each key maps to a category of utilities.

// tailwind.config.js
module.exports = {
  theme: {
    // OVERRIDE: replaces ALL default font sizes
    fontSize: {
      sm: '0.875rem',
      base: '1rem',
      lg: '1.25rem',
    },
    extend: {
      // EXTEND: adds TO the default font sizes
      fontSize: {
        '2xs': '0.625rem',
      },
    },
  },
};

The extend Key Explained

The theme.extend object is where you add custom values without replacing Tailwind's defaults. Anything inside extend is merged with the existing defaults rather than replacing them. This is the recommended approach for most projects — you keep everything Tailwind provides while adding your project-specific values on top. Reserve direct theme overrides for cases where you truly want to eliminate defaults.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
};

The plugins Section

The plugins array accepts official Tailwind plugins and custom plugins that extend the generated CSS. Plugins can add new utility classes, new component classes, new base styles, or new variants. You require them like any Node.js module and can pass configuration objects to plugins that support options. The plugins section runs after the theme is resolved, so plugins have access to all theme values.

// tailwind.config.js
const forms = require('@tailwindcss/forms');
const typography = require('@tailwindcss/typography');

module.exports = {
  plugins: [
    forms,
    typography({ strategy: 'class' }),
    require('@tailwindcss/aspect-ratio'),
  ],
};

The presets Section

The presets array allows you to compose multiple Tailwind configurations together. A preset is just a Tailwind config object that serves as a base. Your project config is merged on top of it. This is the recommended pattern for sharing a base design system across multiple projects in a monorepo — define tokens once in a preset package and consume it everywhere.

// packages/ui-config/tailwind.preset.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#6366f1' },
    },
  },
};

// apps/my-app/tailwind.config.js
module.exports = {
  presets: [require('@company/ui-config/tailwind.preset')],
  content: ['./src/**/*.tsx'],
};

The darkMode Setting

The darkMode key controls how Tailwind's dark: variant activates. Set it to 'media' to activate dark styles based on the OS preference, or 'class' to require a dark class on an ancestor. In Tailwind v3.3+, you can also pass an array with a custom selector: ['class', '.theme-dark'] to use a class name other than dark.

// tailwind.config.js
module.exports = {
  darkMode: 'class',  // or 'media', or ['class', '.theme-dark']
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
};

Config as ESM or CJS

By default, Tailwind expects a CommonJS module (module.exports). In projects using ESM (type: 'module' in package.json), name your config tailwind.config.cjs to explicitly use CommonJS syntax. Tailwind v4 (released 2024) moves to a CSS-first config approach entirely, but for v3 projects (still the most common), tailwind.config.js with CJS syntax is the standard.

// tailwind.config.cjs (for ESM projects)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Using TypeScript Types in Config

Add a JSDoc @type annotation to your config file to get autocompletion in VSCode without converting to TypeScript. The type comes from the tailwindcss package itself. This tells your editor the exact shape of the config object, so you get autocomplete and type errors when you misspell a theme key or pass an invalid value.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        primary: '#6366f1', // autocomplete shows available color keys
      },
    },
  },
  plugins: [],
};

Config Sections at a Glance

To summarize the full anatomy of tailwind.config.js: content defines what files to scan, theme defines design tokens with extend for additive changes, plugins adds extended functionality, presets composes base configs, and darkMode controls dark variant behavior. Every section is optional — an empty config is valid and simply uses all of Tailwind's defaults.

// tailwind.config.js — full anatomy
module.exports = {
  content: [],      // file globs to scan
  darkMode: 'class', // dark mode strategy
  theme: {
    // override defaults here
    extend: {
      // add to defaults here
    },
  },
  plugins: [],      // extend Tailwind's output
  presets: [],      // compose from base configs
};

Quick Check

Test your understanding of the Tailwind CSS configuration file anatomy.

対話的なレッスンで答える

Lesson Recap

In this lesson you learned: the content array specifies which files to scan for class names, theme.extend adds values alongside defaults while direct theme overrides replace them, and plugins and presets compose and extend Tailwind's capabilities. Next up we explore content paths and how Tailwind purges unused classes in production.

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 30
レッスン: 120

無料で学習を始めるコース全体を表示

よくある質問

「tailwind.config.jsの構成」レッスンは無料ですか？

はい。「tailwind.config.jsの構成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。

「tailwind.config.jsの構成」で何を学びますか？

設定ファイルのcontent、theme、extend、plugins、presetsの各セクションと、それらがコンパイルに及ぼす影響を理解します。ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Tailwind CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「tailwind.config.jsの構成」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTailwind CSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Tailwind CSS Academyに戻る