【 React 】プロジェクトでのCSS変数の活用- Tailwind CSSとStyled Componentsの一元管理

## はじめに
過去の投稿↓で、CSS変数の活用した **Tailwind CSS** と **Styled Components** の調査を行っていました。

https://qiita.com/Tateishi0819/items/23a77c5cbcfce70a79d6

今回は、引き続きReactプロジェクトでTailwind CSSとStyled Componentsを両方使用する場合について投稿します。

また**CSS変数を活用してカラースキームを一元管理する方法**について残しているので、悩んでいる方がいればお役に立てたら嬉しいです。

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

:**rootセレクタ**を使ってグローバルに定義することで、**ドキュメント全体で利用可能**になります。

:::note info
:**rootセレクタ**
CSSの全ての要素に適用される**最上位のセレクタ**です。
HTML文書の**ルート要素**を指しており、通常は<html>要素に対応します。

**詳細度の高いスタイリング**をしない場合は、:rootの設定が適応されます。
:::


### 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);
}
```

## 2. Tailwind CSSの設定
Tailwind CSSでCSS変数を使用するために、tailwind.config.jsファイルを設定します。

```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: [],
};
```

### 3. Styled Componentsでの使用
Styled ComponentsでCSS変数を利用するために、テーマとグローバルスタイルを設定します。


```typescript:theme.ts
export const theme = {
  colors: {
    primary: 'var(--primary-color)',
    secondary: 'var(--secondary-color)',
    background: 'var(--background-color)',
    text: 'var(--text-color)',
  }
};
```

```typescript:globalStyles.ts
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;
```

## 4. Reactコンポーネントでの使用
ReactコンポーネントでTailwind CSSとStyled Componentsを両方使用します。

```react:App.tsx
import React from 'react';
import { ThemeProvider } from 'styled-components';
import GlobalStyles from './globalStyles';
import { theme } from './theme';
import './styles.css'; // グローバルCSSをインポート
import 'tailwindcss/tailwind.css'; // Tailwind CSSをインポート
import styled from 'styled-components';

const App: React.FC = () => (
  <ThemeProvider theme={theme}>
    <GlobalStyles />
    <div className="bg-background text-text p-4">
      <h1>Hello World</h1>
      <Button>Primary Button</Button>
      <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>
  </ThemeProvider>
);

const Button = styled.button`
  background-color: var(--primary-color);
  color: var(--text-color);
`;

export default App;
```

:::note info
**Tailwind CSS の ユーティリティクラス メモ程度**
特定のテキストを設定ファイルの名前の頭につけて用います。

**背景色**
.**bg**-blue-500 { background-color: #3b82f6; }

**テキスト色**
.**text**-blue-500 { color: #3b82f6; }

他にもある‥!!
:::

## さいごに
:**root内**で定義したCSS変数を使って、Tailwind CSSとStyled Componentsの両方でスタイルを一元管理することで、プロジェクト全体で統一されたカラースキームを維持しやすくなります。

これにより、スタイルの一貫性が保たれ、テーマの切り替えやメンテナンスが簡単になりました。

## リンク

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

https://tailwindcss.com/docs/background-color

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