【 React 】CSS変数の活用: Styled ComponentsとTailwind CSSの組み合わせ

はじめに

私のプロジェクトではStyled ComponentsとTailwind CSSの両方を利用してます。

お仕事の一環でスタイルの一貫性を保ち、メンテナンスを容易にするため、CSS変数を活用する方法について調査したので紹介します。

1. CSS変数の基本

CSS変数（カスタムプロパティ）は、CSS内で再利用可能な値を定義できる機能です。

変数を使うことで、テーマの切り替えやスタイルの一貫性を保つことが容易になります。

SCSSを使用せずにCSSで変数管理ができるようになったので、ありがたいです。

CSS変数の定義

CSS変数は:rootセレクタ内で定義するのが一般的です。

:rootセレクタはドキュメントツリーのルート要素（通常はHTMLドキュメントの要素）を対象にし、これにより変数がドキュメント全体で利用可能になります。

styles.css

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #ecf0f1;
  --text-color: #2c3e50;
}

CSS変数の使用

ライブラリーを使用しない例です。

form.css

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.button-secondary {
  background-color: var(--secondary-color);
  color: var(--text-color);
}

2. Styled ComponentsでのCSS変数の使用

テーマの定義とグローバルスタイルの適用

まず、テーマを定義し、グローバルスタイルでCSS変数を設定します。

theme.js

export const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
    background: '#ecf0f1',
    text: '#2c3e50',
  }
};

globalStyle.js

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  :root {
    --primary-color: ${(props) => props.theme.colors.primary};
    --secondary-color: ${(props) => props.theme.colors.secondary};
    --background-color: ${(props) => props.theme.colors.background};
    --text-color: ${(props) => props.theme.colors.text};
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
`;

export default GlobalStyles;

Reactコンポーネントでテーマを適用

form.tsx

import React from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyles from './globalStyles';
import { theme } from './theme';

const App = () => (
  <ThemeProvider theme={theme}>
    <GlobalStyles />
    <div>
      <h1>Hello World</h1>
      <Button>Primary Button</Button>
      <Button secondary>Secondary Button</Button>
    </div>
  </ThemeProvider>
);

const Button = styled.button`
  background-color: ${(props) => (props.secondary ? 'var(--secondary-color)' : 'var(--primary-color)')};
  color: var(--text-color);
`;

export default App;

3. Tailwind CSSでのCSS変数の使用

Tailwind CSSの設定

tailwind.config.jsでカスタムCSS変数を定義します。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary-color)',
        secondary: 'var(--secondary-color)',
        background: 'var(--background-color)',
        text: 'var(--text-color)',
      },
    },
  },
  variants: {},
  plugins: [],
};

CSS変数の定義

グローバルCSSでCSS変数を定義します。

styles.css

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #ecf0f1;
  --text-color: #2c3e50;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Tailwind CSSクラスで使用

Reactコンポーネント内でTailwind CSSクラスを使用してCSS変数を参照します。

app.ts

import React from 'react';
import './styles.css'; // グローバルCSSをインポート
import 'tailwindcss/tailwind.css'; // Tailwind CSSをインポート

const App = () => (
  <div>
    <button className="bg-primary text-text p-4 rounded">Primary Button</button>
    <button className="bg-secondary text-text p-4 rounded">Secondary Button</button>
  </div>
);

export default App;

さいごに

CSSの変数を使用して、Styled ComponentsとTailwind CSSを組み合わせたCSS変数を活用することができました。

テーマ設定やグローバルCSSを使って変数を定義し、各コンポーネントで再利用することで、柔軟かつ効率的なスタイル管理が可能になります。

環境により、これが正解というものはないと思いますが、自分のプロジェクトに何が最適なのか改めて考えることができました。

今回は、Styled ComponentsとTailwind CSS を個別に CSS変数 で定義したので、共通ファイルで管理できるとより保守性が高苦なるのでは？と思いました。

リンク