Tailwind CSSとStyled ComponentsをReactで併用する

Tailwind CSS と Styled Components は、フロントエンド開発において人気のあるスタイリングのツールです。
今回は、これらを React の環境で併用する方法を解説します。

1:Global Styles の適用

Tailwind のリセットスタイルやベーススタイルを全体に適用します。

// styles/GlobalStyles.tsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
`;

export default GlobalStyle;

2:Styled Components で Tailwind のクラスを利用

以下の例では、Styled Components 内で@apply ディレクティブを使用して Tailwind のユーティリティクラスを適用しています。

// components/Button.tsx
import styled from "styled-components";

const Button = styled.button`
  @apply bg-blue-500 text-white py-2 px-4 rounded;
`;

export default Button;

3:React コンポーネントでの使用

Tailwind と Styled Components が組み合わされた Button コンポーネントを React 内で利用します。

// components/App.tsx
import React from "react";
import Button from "./Button";
import GlobalStyle from "../styles/GlobalStyles";

const App: React.FC = () => {
  return (
    <div className="App">
      <GlobalStyle />
      <Button>Click Me!</Button>
    </div>
  );
};

export default App;

このようにして、React と TypeScript の環境下で Tailwind と Styled Components を併用することが可能です。
ただし、@apply は全ての Tailwind ユーティリティクラスをサポートしているわけではありませんので、注意が必要です。

これにより、React と TypeScript のプロジェクト内で、
Tailwind のユーティリティファーストのアプローチと Styled Components の CSS-in-JS のアプローチの双方のメリットを活用することができます。