TailWindCSS V 3から始める0反応中

npm install -D tailwindcss postcss autoprefixer

tailwindcss設定の作成

npx tailwindcss init -p

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

インポートTorwindCSSディレクティブ

src /
 | - App.js
 | - App.css
 | - index.css
   ...

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

TrewWindCSSコードの実行

function App() {
  return (
    <section className="px-4 py-24 mx-auto max-w-7xl">
      <div className="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
        <div className="col-auto text-center md:col-span-7 lg:text-left">
          <h1 className="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready
            to start your TailwindCSS jurney?</h1>
          <p className="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
            Your move!
            Yu-Gi-Oh!
            Your move!
            Yu-Gi-Oh!
            It's time to du-du-du-du-dududududududuel!
            Yu-Gi-Oh! (-Oh! -Oh! -Oh!)
            Your move!
            Yu-Gi-Oh is king of games!
            It's time to du-du-du-du-dududududududuel!
            Yu-Gi-Oh!
          </p>
        </div>
        <div className="col-auto md:col-span-4">
          <form className="mb-6 border-0 rounded-lg shadow-xl">
            <div className="cursor-pointer px-6 py-4 text-center bg-blue-500 text-white font-bold rounded">
              Get started
            </div>
          </form>
        </div>
      </div>
    </section>

  );
}

export default App;

npm run start

結論