Rumah >hujung hadapan web >tutorial js >Bermula dengan TailwindCSS dalam React: Panduan Lengkap
TailwindCSS ialah rangka kerja CSS yang mengutamakan utiliti yang menyediakan satu set kelas utiliti peringkat rendah untuk membina reka bentuk tersuai tanpa menulis CSS tersuai. Ia semakin popular dalam komuniti React kerana fleksibiliti, skalabiliti dan kemudahan penggunaannya. Dengan menggunakan TailwindCSS dalam aplikasi React anda, anda boleh menggayakan komponen secara langsung dalam JSX, meningkatkan kelajuan pembangunan dan kebolehselenggaraan dengan ketara.
TailwindCSS ialah rangka kerja CSS mengutamakan utiliti yang membolehkan anda menggayakan elemen dengan menggunakan kelas utiliti pratakrif terus dalam penanda HTML atau JSX anda. Tidak seperti rangka kerja CSS tradisional seperti Bootstrap, yang disertakan dengan komponen pra-reka bentuk, Tailwind memberikan anda lebih fleksibiliti dengan menawarkan kelas utiliti peringkat rendah (cth., p-4 untuk padding, bg-blue-500 untuk warna latar belakang) yang anda boleh gabungkan buat sebarang reka bentuk yang anda suka.
Untuk menyediakan TailwindCSS dalam projek React anda, ikut langkah berikut:
npx create-react-app my-app cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Ini akan mencipta fail tailwind.config.js.
Buka fail tailwind.config.js dan konfigurasikan pilihan pembersihan untuk mengalih keluar gaya yang tidak digunakan dalam pengeluaran.
npx create-react-app my-app cd my-app
Di dalam folder src, cipta fail baharu bernama index.css (atau gunakan fail CSS sedia ada anda) dan import asas, komponen dan utiliti Tailwind:
npm install -D tailwindcss postcss autoprefixer
Dalam src/index.js atau src/index.tsx, import fail TailwindCSS:
npx tailwindcss init
Kini, apl React anda sedia untuk menggunakan TailwindCSS!
Setelah TailwindCSS disediakan, anda boleh mula menggunakan kelas utiliti dalam komponen React anda. Berikut ialah contoh cara menggunakan Tailwind dalam komponen React:
module.exports = { content: [ './src/**/*.{html,js,jsx,ts,tsx}', // Specify paths to all your JSX files ], theme: { extend: {}, }, plugins: [], };
Tailwind memudahkan untuk melaksanakan reka bentuk responsif dengan titik putus terbina dalamnya. Anda boleh menambah kelas utiliti responsif terus pada elemen berdasarkan saiz skrin.
Contoh reka letak responsif:
@tailwind base; @tailwind components; @tailwind utilities;
Anda boleh melanjutkan TailwindCSS dengan menyesuaikan fail tailwind.config.js. Contohnya, jika anda memerlukan warna atau jarak tersuai, anda boleh menambahkannya pada konfigurasi.
import './index.css';
Kini, anda boleh menggunakan warna dan jarak tersuai baharu dalam komponen anda:
import React from 'react'; const Button = ({ label, primary }) => { return ( <button className={`py-2 px-4 rounded-lg text-white ${ primary ? 'bg-blue-500 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-700' }`} > {label} </button> ); }; const App = () => { return ( <div className="min-h-screen bg-gray-100 flex items-center justify-center"> <Button label="Primary Button" primary /> <Button label="Secondary Button" /> </div> ); }; export default App;
TailwindCSS termasuk ciri Purge yang mengalih keluar CSS yang tidak digunakan dalam pengeluaran, mengurangkan saiz binaan akhir. Anda harus mendayakan pembersihan untuk binaan pengeluaran untuk memastikan hanya gaya yang diperlukan disertakan.
Tailwind mengendalikan perkara ini secara automatik apabila menggunakan create-react-app atau alatan binaan lain, tetapi anda sentiasa boleh mengkonfigurasinya secara manual dalam fail tailwind.config.js di bawah pilihan pembersihan.
TailwindCSS ialah rangka kerja CSS mengutamakan utiliti yang berkuasa dan fleksibel yang berfungsi dengan lancar dengan React. Dengan menggunakan TailwindCSS, anda boleh dengan cepat membuat reka bentuk yang sangat disesuaikan dan responsif tanpa menulis CSS tradisional. Pendekatan mengutamakan utiliti membolehkan anda mengekalkan gaya yang bersih, modular dan boleh diguna semula, menjadikan pembangunan lebih pantas dan lebih cekap.
Atas ialah kandungan terperinci Bermula dengan TailwindCSS dalam React: Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!