خواندن ۲ دقیقه·۲ سال پیش

آموزش نصب و کار با تیلویند سی اس اس Tailwind CSS

CSS با اسکن تمام فایل‌های HTML، اجزای جاوا اسکریپت، و هر قالب دیگر برای نام کلاس‌ها، ایجاد سبک‌های مربوطه و سپس نوشتن آن‌ها در یک فایل CSSاستاتیک کار می‌کند.

تیلویند: سریع، انعطاف پذیر و قابل اعتماد است - و زمان اجرای تقریبا صفر است.

نصب و راه اندازی تیلویند سی اس اس Tailwind CSS با استفاده از خط فرمان

ساده ترین و سریع ترین راه برای راه اندازی و اجرا باTailwind CSS از ابتدا با ابزار Tailwind CLI است. اگر می‌خواهید بدون نصب Node.js از آن استفاده کنید، CLI به عنوان یک فایل اجرایی مستقل نیز در دسترس است.

1- نصب Tailwind CSS

tailwindcss را از طریق npm نصب کنید و tailwind.config.js فایل خود را بسازید.

در خط فرمان بنویسید:

npm install -D tailwindcss 
npx tailwindcss init

2- مسیرهای قالب خود را پیکربندی کنید

مسیرها را به همه فایل های قالب خود در tailwind.config.jsفایل خود اضافه کنید.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [&quot./src/**/*.{html,js}&quot],
  theme: {
    extend: { },
  },
  plugins: [ ],
 }

3- دستورات Tailwind را به CSS خود اضافه کنید

@tailwindدستورالعمل های مربوط به هر یک از لایه های Tailwind را به فایل CSS اصلی خود اضافه کنید .

فایل src/input.css

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

4- فرآیند ساخت Tailwind CLI را شروع کنید

ابزار CLI را اجرا کنید تا فایل های قالب خود را برای کلاس ها اسکن کنید و CSS خود را بسازید.

در خط فرمان بنویسید:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

5- شروع به استفاده از Tailwind در HTML خود کنید

فایل CSS کامپایل شده خود را به آن اضافه کنید <head>و از کلاس های ابزار Tailwind برای استایل دادن به محتوای خود استفاده کنید.

در فایل src/index.html اضافه کنید تا مشابه کدهای زیر شود.

<!doctype html>
<html>
<head>
  <meta charset=&quotUTF-8&quot>
  <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
  <link href=&quot/dist/output.css&quot rel=&quotstylesheet&quot>
</head>
<body>
  <h1 class=&quottext-3xl font-bold underline&quot>
    Hello world!
  </h1>
</body>
</html>

عکس کدهای بالا یکجا

و اما پس از نصب و افزودن کدها چه کنم؟

با برخی از مفاهیم اصلی که Tailwind CSS را از نوشتن CSS سنتی متفاوت می کند، آشنا شوید.

Utility-First Fundamentals
Handling Hover, Focus, and Other States
Reusing Styles
Responsive Design
Dark Mode
Adding Custom Styles

tailwind css نصب تیلویند خط فرمان آموزش برنامه نویسی آموزش css

سیداحمد

امیدوارم به بهتر شدن کمک کنم. در تلگرام و اینستاگرام پیام بفرست، SeyedAhmaddv - ارشد نرم افزار، توسعه دهنده ری اکت و نکست

شاید از این پست‌ها خوشتان بیاید