Hướng dẫn tailwind css not working vue - tailwind css không hoạt động vue

Thêm văn bản in đậm TextAdd, thêm văn bản in nghiêng,

Thêm báo giá, thêm mã,

Chèn đường dẫn

Thêm một liên kết,

Thêm một danh sách viên đạn, thêm một danh sách được đánh số, thêm một danh sách nhiệm vụ,

Đề cập trực tiếp đến người dùng hoặc TeamReference một vấn đề hoặc yêu cầu kéo

Thêm tiêu đề TextAdd Bold văn bản, thêm văn bản in nghiêng, thêm một danh sách viên đạn, thêm danh sách được đánh số, thêm một danh sách nhiệm vụ,

Phản ứng với ngón tay cái lên biểu tượng cảm xúc đã phản ứng với ngón tay cái xuống biểu tượng cảm xúc đã phản ứng với biểu tượng cảm xúc cười phản ứng với biểu tượng cảm xúc hooray đã phản ứng với biểu tượng cảm xúc bối rối đã phản ứng với biểu tượng cảm xúc trái tim đã phản ứng với biểu tượng cảm xúc tên lửa phản ứng với đôi mắt biểu tượng cảm xúc

Tôi có một thành phần web Vue. Khi tôi xây dựng nó như một thành phần Vue bình thường, mọi thứ đều hoạt động tốt. Tuy nhiên, nó đã mất tất cả các kiểu dáng đuôi ngay lập tức tôi đã chuyển đổi nó thành một thành phần web Vue. Cảm ơn vì sự giúp đỡ của bạn trước đó.

tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
      },
    },
  },
  plugins: [
  ],
}

tailwind.css

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

và vite.config.js của tôi

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('-')
      }
    }
  })],
  build: {
    lib: {
      entry: './src/entry.js',
      formats: ['es','cjs'],
      name: 'web-component',
      fileName: (format)=>(format === 'es' ? 'index.js' : 'index.cjs')
    },
    sourcemap: true,
    target: 'esnext',
    minify: false
  }
})

Hướng dẫn đơn giản về cách sử dụng Tailwindcss bên trong dự án Vue tiếp theo của bạn

Tín dụng hình ảnh: Andre Madarang

Tailwindcss là gì?

Tailwind là một khung CSS đầu tiên tiện ích để xây dựng nhanh các giao diện người dùng tùy chỉnh. Tailwind khác với các khung như bootstrap, nền tảng hoặc bulma trong đó nó không phải là một bộ UI. Nó không có chủ đề mặc định và không có thành phần UI tích hợp. Mặt khác, nó cũng không có ý kiến ​​gì về việc trang web của bạn nên xem xét như thế nào và không áp đặt các quyết định thiết kế mà bạn phải chiến đấu để hoàn tác.

Về cơ bản, Tailwind cung cấp cho bạn toàn bộ quyền kiểm soát đối với cách các trang web của bạn và không đi kèm với những thứ rác rưởi mà bạn sẽ không cần trong dự án của mình.

Hãy tiến hành sử dụng TailWindcss trong dự án VUE của chúng tôi.

Tạo một dự án Vue mới

Mở thiết bị đầu cuối của bạn và nhập các lệnh sau

vue init myProjectName Nếu bạn đang sử dụng Vue 2 CLI hoặc vue create myProjectName for Vue 3

cd myProjectName để thay đổi vào thư mục dự án.

Cài đặt đuôi gió bằng NPM

npm install tailwindcss --save-dev

hoặc sử dụng sợi

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

0

Tạo tệp cấu hình đuôi

Nhập phần sau để tạo tệp cấu hình

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

1

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

2

hoặc

npx tailwind init tailwind.config.js --full

Định cấu hình Postcss

Tạo tệp postcss.config.js

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

3

Sau đó tiến hành định cấu hình Postcss để xử lý đuôi, thực hiện điều đó bằng cách thêm mã sau vào tệp

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

4 của bạn

Tệp Postcss.Config.js

Xóa tất cả các cấu hình đuôi khỏi pack.json

Xóa các dòng mã sau khỏi tệp ____15

Tạo tệp CSS

Điều hướng đến

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

6 và tạo tệp

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

7 mới trong

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

Nhập Tailwind vào ứng dụng Vue của bạn

Mở tệp

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

9 của bạn và thêm:

import '@/assets/css/tailwind.css'

Kiểm tra rằng nó hoạt động

Chỉnh sửa tệp có tên

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('-')
      }
    }
  })],
  build: {
    lib: {
      entry: './src/entry.js',
      formats: ['es','cjs'],
      name: 'web-component',
      fileName: (format)=>(format === 'es' ? 'index.js' : 'index.cjs')
    },
    sourcemap: true,
    target: 'esnext',
    minify: false
  }
})

0 trong thư mục chế độ xem và thêm phần sau giữa thẻ mẫu:

Bạn nên nhận được một cái gì đó như:

Bước tiếp theo?

Tiến hành tạo ra những thứ tuyệt vời! 💪💪

Cảm ơn bạn đã đọc đến đây. Nếu bạn thích bài đăng này, xin vui lòng chia sẻ, bình luận và nhấn nó một vài lần (tối đa 50 lần). . . Có lẽ nó sẽ giúp ai đó.

Theo dõi tôi trên Twitter và Medium nếu bạn quan tâm đến các bài viết chuyên sâu và thông tin như thế này trong tương lai!Twitter and Medium if you’re interested in more in-depth and informative write-ups like these in the future!

Tailwind CSS có hoạt động với Vue không?

Tailwind có hoạt động với Vue 3 không?

Làm cách nào để sử dụng CSS Tailwind trong Vue CLI?