Thiết lập trình soạn thảo

Hỗ trợ cú pháp

Tailwind CSS sử dụng cú pháp CSS tùy chỉnh như @theme, @variant, và @source, và trong một số trình soạn thảo điều này có thể kích hoạt cảnh báo hoặc lỗi khi các quy tắc này không được nhận diện.

Nếu bạn đang sử dụng VS Code, plugin chính thức Tailwind CSS IntelliSense của chúng tôi bao gồm một chế độ ngôn ngữ Tailwind CSS chuyên dụng có hỗ trợ cho tất cả các at-rule và hàm tùy chỉnh mà Tailwind sử dụng.

Trong một số trường hợp, bạn có thể cần vô hiệu hóa linting/validation CSS native nếu trình soạn thảo của bạn rất nghiêm ngặt về cú pháp mà nó mong đợi trong các file CSS của bạn.

Zed

Zed là một trình soạn thảo mã nhanh, hiện đại, được thiết kế từ đầu cho các quy trình làm việc phát triển tiên tiến, bao gồm chỉnh sửa agentic với AI. Nó có hỗ trợ tích hợp sẵn cho tự động hoàn thành, linting và xem trước khi hover của Tailwind CSS, mà không cần cài đặt và cấu hình extension riêng biệt. Nó cũng tích hợp chặt chẽ với Prettier, vì vậy plugin Prettier chính thức của chúng tôi hoạt động mượt mà với Zed khi được cài đặt.

Xem Zed và tìm hiểu thêm về cách nó hoạt động với Tailwind CSS.

IntelliSense for VS Code

Extension chính thức Tailwind CSS IntelliSense cho Visual Studio Code nâng cao trải nghiệm phát triển Tailwind bằng cách cung cấp cho người dùng các tính năng nâng cao như tự động hoàn thành, làm nổi bật cú pháp và linting.

• Tự động hoàn thành — cung cấp gợi ý thông minh cho các utility class, cũng như các hàm và chỉ thị CSS.
• Linting — làm nổi bật lỗi và các lỗi tiềm ẩn trong cả CSS và markup của bạn.
• Xem trước khi hover — hiển thị CSS đầy đủ cho các utility class khi bạn hover lên chúng.
• Làm nổi bật cú pháp — để các tính năng Tailwind sử dụng cú pháp CSS tùy chỉnh được làm nổi bật chính xác.

Xem dự án trên GitHub để tìm hiểu thêm, hoặc thêm vào Visual Studio Code để bắt đầu ngay bây giờ.

Sắp xếp class với Prettier

Chúng tôi duy trì một plugin Prettier chính thức cho Tailwind CSS tự động sắp xếp các class của bạn theo thứ tự class được khuyến nghị của chúng tôi.

Nó hoạt động mượt mà với các cấu hình Tailwind tùy chỉnh, và vì nó chỉ là một plugin Prettier, nó hoạt động ở mọi nơi Prettier hoạt động—bao gồm mọi trình soạn thảo và IDE phổ biến, và tất nhiên là trên dòng lệnh.

<!-- Before --><button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Submit</button><!-- After --><button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">Submit</button>

Xem plugin trên GitHub để tìm hiểu thêm và bắt đầu.

JetBrains IDEs

Các JetBrains IDE như WebStorm, PhpStorm và các IDE khác bao gồm hỗ trợ cho việc hoàn thành Tailwind CSS thông minh trong HTML của bạn.

Tìm hiểu thêm về hỗ trợ Tailwind CSS trong JetBrains IDE →