React 開発日記。開発からデプロイまで。#6

npx create-react-app react-tailwindscc
cd react-tailwindscc

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwindcss, postcss, autoprefixerの３つをインストールします。
次にtailwindcssに必要なファイルを作成します。tailwind.config, postcss.config がroot直下に作成されます。

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

srcディレクトリ配下のファイルが全て対象になるようcontent部分に“./src/**/*.{js,jsx,ts,tsx}”を追記します。

@tailwind base;
@tailwind components;
@tailwind utilities;

元々記述されていたコードを消して指定されたコードを記述します。

npm run start

mkdir ./src/components
touch ./src/components/Test.jsx

公式ではApp.jsにスタイルを当てていますが、ここではcomponetsディレクトリの中にをTest ファイルを作ることにします。
そして、この中のjsxにスタイルを当てます。

{ /* Test.jsx */ }
export const Test = () => {
  return (
    <>
        <h1 className="p-10 text-6xl text-pink-500">Hello Japan</h1>
        <div className="flex justify-between mx-10">
	  <div>01</div>
	  <div>02</div>
	  <div>03</div>
	</div>
    </>
  )
}

{ /* App.jsｘ */ }
import './App.css';
import { Test } from './components/Test';

function App() {
  return (
    <Test />
  )
}

export default App;