Cài đặt Tailwind CSS với SolidJS

Thiết lập Tailwind CSS trong dự án SolidJS.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án SolidJS mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng SolidJS Vite template.

Terminal

npx degit solidjs/templates/js my-projectcd my-project

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/vite và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Cấu hình Vite Plugin

Thêm plugin @tailwindcss/vite vào cấu hình Vite của bạn.

vite.config.ts

import { defineConfig } from 'vite';import solidPlugin from 'vite-plugin-solid';import tailwindcss from '@tailwindcss/vite';export default defineConfig({  plugins: [    tailwindcss(),    solidPlugin(),  ],  server: {    port: 3000,  },  build: {    target: 'esnext',  },});

Import Tailwind CSS

Thêm @import vào ./src/index.css để import Tailwind CSS.

index.css

@import "tailwindcss";

Bắt đầu quá trình build

Chạy quá trình build với npm run dev.

Terminal

npm run dev

Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

App.jsx

export default function App() {  return (    <h1 class="text-3xl font-bold underline">      Hello world!    </h1>  )}