Aplikasi React Dan Tailwind Css

Tailwind.css adalah kerangka kerja CSS utilitas-pertama yang dikemas dengan kelas-kelas yang dapat disusun untuk membangun desain apa pun, langsung di markup Anda (setidaknya itulah yang dikatakan situs web resmi).

Anda di sini untuk mengetahui cara mengintegrasikan Tailwind dengan React.js, mari kita mulai. Dalam artikel ini, saya anggap Anda tahu:

React.js
Node.js (Untuk keperluan instalasi package)

1. Buat Aplikasi React Anda.

Gunakan perintah jika Anda belum melakukannya dan ganti "aplikasi saya" dengan nama aplikasi yang Anda inginkan:

$ npx create-react-app my-app
$ cd my-app

2. Pasang Tailwind CSS dan package yang diperlukan

$ npm install -D tailwindcss postcss autoprefixer

Anda juga harus membuat file konfigurasi:

$ npx tailwindcss init -p

3. Edit file Konfigurasi

Di dalam tailwind.config.js tambahkan yang berikut untuk memastikan file Anda dapat menggunakan kelas tailwindcss.

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

Di index.css tambahkan yang berikut ini:

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

4. Gunakan Tailwind.css

const App = () => {
  return (
     <div className="border border-red-400 shadow-xl p-6 w-fit mt-6 mx-auto text-2xl max-[520px]:text-xl max-[520px]:text-md font-extralight rounded-xl">
        <div className="w-fit mx-auto">
          <span className="text-red-400 text-4xl max-[520px]:text-2xl font-extralight">Quiz App</span>
        </div>
        <div className="flex flex-col my-2">
          <span>Number of Questions:</span>
          <input
            className="p-1 border-b border-red-400"
            id="amount"
            name="amount"
            type="number"
          />
        </div>
        <div className="flex flex-col my-2">
          <span>Difficulty:</span>
          <div className="text-xl max-[520px]:text-md">
            <div className="flex items-center">
              <input
                className="mr-1"
                id="easy"
                name="difficulty"
                value="easy"
                checked={parameters.difficulty === "easy"}
                onChange={changeParameters}
                type="radio" 
              />
              <label htmlFor="easy">Easy</label>
            </div>
          </div>
        </div>
        <div className="w-full">
          <button className={`w-full border border-red-400 font-light text-xl max-[520px]:text-md mr-5 text-red-400 rounded-2xl px-3 py-1 hover:bg-red-400 hover:text-white transition-all duration-300`}>
            <span>Submit</span>
          </button>
        </div>
      </div>
  );
}

export default App;

Anda dapat melihat lebih banyak kelas penarik di situs web resmi.

Jalankan aplikasi reaksi menggunakan:

$ npm start

Hasilnya adalah:

Bonus: Mengoptimalkan Tailwind.css

Di dalam postcss.config.js tambahkan yang berikut ini:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};

Ini menghasilkan file CSS terkecil dengan membuat CSS yang sebenarnya Anda gunakan di aplikasi.

Terima kasih sudah membaca.