مستندات

ساده‌ترین روش برای شروع کار با Tailwind CSS استفاده از CDN است. کافی است کد زیر را در فایل HTML خود قرار دهید:

<script src="js/tailwind.js"></script>

نصب با npm

برای پروژه‌های واقعی، بهتر است Tailwind را با npm نصب کنید:

npm install -D tailwindcss
npx tailwindcss init

فایل tailwind.config.js برای سفارشی‌سازی تنظیمات استفاده می‌شود:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'brand': '#0ea5e9',
      },
    },
  },
  plugins: [],
}

به جای نوشتن CSS سفارشی، از کلاس‌های از پیش تعریف شده استفاده می‌کنید:

<button class="btn-primary">
  دکمه
</button>

<style>
.btn-primary {
  background-color: blue;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}
</style>

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  دکمه
</button>