marii_taghavi

دارای 3 مهارت

ساخت لینک

گزارش

استفاده از متغیر های css در tailwind

یک سال پیش

تیلویند

سی اس اس

چطوری میتونم متغیر های css رو داخل tailwind هم استفاده کنم؟ متفیر های css

--primary-color: #fff;
--secondary-color: #000;

استفاده در tailwind

<div class="bg-primary-color">
  <h1>Hello World</h1>
</div>

1 پاسخ

ثبت پاسخ جدید

m5kh6n77

دارای 5 مهارت

برای تعریف متغیر در tailwind دو راه وجود داره

1.تعریف متغیر های css در فایل روت tailwind


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

:root {
  --primary-color: #fff;
  --secondary-color: #000;
}

2.تعریف متغیر های tailwind در فایل tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        "primary-color": "var(--primary-color)",
        "secondary-color": "var(--secondary-color)"
      },
    },
  },
};

موفق باشی