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

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

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

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

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

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

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

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

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

### CSS変数の使用
ライブラリーを使用しない例です。

```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変数を設定します。

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

```react: 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コンポーネントでテーマを適用

```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変数を定義します。

```javascript: 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変数を定義します。

```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変数を参照します。
```typescript: 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変数 で定義したので、共通ファイルで管理できるとより保守性が高苦なるのでは？と思いました。

## リンク

https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties