Hướng dẫn can i use bootstrap and tailwind together - tôi có thể sử dụng bootstrap và tailwind cùng nhau không

Tùy chọn 1: Áp dụng hoặc tái tạo các lớp học

Nếu bạn chỉ cần một hoặc hai lớp, ví dụ từ hệ thống màu của đuôi, bạn cũng có thể sao chép chúng. Một số ký tự sẽ phải được che dấu, ví dụ:

// style.css

.hover\:text-blue-900:hover,
.text-blue-900 {
  color: #183f6d;
}

Đó là những gì tôi đã làm khi bắt đầu một dự án, trong đó Bootstrap là khung chính. Nếu đó là một số màu sắc và chức năng, bạn cũng có thể xây dựng nó với SCSS một cách nhanh chóng. Tuy nhiên, về lâu dài, theo tôi, không phải là giải pháp tốt nhất và sạch nhất.In the long run, however, in my opinion, not the best and cleanest solution.

Ví dụ cho điều này:

// style.scss

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}

Mã đầy đủ (GitHub Gist)

Tùy chọn 2: Tích hợp Tailwind

Nhưng ngay khi nhiều chức năng nên được thêm vào, hoặc bạn muốn xây dựng nó sạch hơn, bạn có thể làm ở đây với tiền tố được đề cập bởi tài liệu như Ostap Brehin nói.

// Tailwind.config.js

module.exports = {
  prefix: 'tw-',
}

Các định nghĩa được chuẩn hóa có thể được xóa bằng cách vô hiệu hóa Preflight:

// Tailwind.config.js

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Các định nghĩa được chuẩn hóa có thể được xóa bằng cách vô hiệu hóa Preflight:

Tốt hơn nên kiểm tra tệp CSS được tạo.

// Tailwind.config.js

module.exports = {
    content: [
        './**/*.php',
        '../Resources/**/*.{html,js}',
    ],
    safelist: [
        'tw-bg-blue-800/75',
        {
            pattern: /(bg|text)-(blue)-(800)/,
            variants: ['hover'],
        },
    ],
    prefix: 'tw-',
    theme: {
        extend: {},
    },
    corePlugins: {
        preflight: false,
    },
    plugins: [],
}

Tailwind là một khung CSS đầu tiên tiện ích mà một trong những đồng nghiệp của tôi đã ủng hộ nội bộ với kiến ​​thức vững chắc trong một thời gian. Sau khi sử dụng các lớp tiện ích Bootstrap, trên trang web của riêng tôi, cuối cùng tôi cũng đã bán được những lợi ích của việc sử dụng các lớp tiện ích cho thiết kế web.

Các lớp tiện ích của Bootstrap, tương đối cơ bản và tôi sớm ghen tị với một số lớp tiện ích được tìm thấy trong Tailwind, đặc biệt là khả năng tiền tố bất kỳ lớp tiện ích nào có tên điểm dừng (ví dụ:

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
2).

Thật không may, trang web của tôi khá phụ thuộc vào các thành phần bootstrap và mặc định (xấu của tôi), và ý tưởng xé nó ra và xây dựng lại nó từ đầu với một khung khác là một chút đối với tôi. Và mặc dù có thể có các công cụ ngoài kia giúp bạn chuyển đổi CSS Bootstrap thành Tailwind, tôi đã không thích thử thách trải qua tất cả các bài viết của tôi để kiểm tra các vấn đề.

Những gì tôi đã kết thúc là giữ Bootstrap làm khung CSS chính của tôi, nhưng cũng thêm các lớp tiện ích Tailwind vào hỗn hợp bằng cách tùy chỉnh nó để chơi độc đáo với Bootstrap.

Bài viết này sẽ đi qua cách tôi đã cấu hình Tailwind để làm việc hòa bình cùng với Bootstrap. Để tìm hiểu thêm về Tailwind, hãy xem bài viết của Karl, chuyển sang Tailwind CSS.. To learn more about Tailwind, check out Karl’s article “Switching to Tailwind CSS”.

Cấu hình đuôi

Để bắt đầu với Tailwind, bạn sẽ cần cài đặt và xử lý nó. Tôi sẽ trình bày ngắn gọn cách sử dụng công cụ NPM & Gulp ưa thích của mình. Kiểm tra tài liệu bắt đầu của Tailwind, để biết các ví dụ sử dụng các công cụ xây dựng khác nhau.

npm install tailwindcss

Sau đó, bạn sẽ muốn tạo một tệp CSS khác (hoặc sửa đổi một tệp hiện có mà bạn đã xử lý theo một cách nào đó, bằng cách thêm:

@tailwind utilities;

Điều này sẽ mang lại phần lớn các lớp tiện ích Tailwind. Có các nhập khẩu khác, chẳng hạn như các thành phần cơ sở và các thành phần của người Hồi giáo; Tuy nhiên, tôi thấy rằng tôi đã không cần họ từ ngày đầu tiên. Tôi đã vui mừng khi sử dụng các thành phần và hệ thống lưới Bootstrap, như cảnh báo và nút, bây giờ.

Khả năng tương thích bootstrap

Tiếp theo, bạn sẽ cần tạo một tệp

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
3 theo cách thủ công hoặc sử dụng
(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
4. Với tệp cấu hình này, bạn sẽ làm cho Tailwind chơi độc đáo với Bootstrap bằng cách đặt tiền tố trên tất cả các lớp tiện ích Tailwind, để ngăn chặn bất kỳ tên lớp trùng lặp nào, sau đó thay đổi điểm dừng của Tailwind để phù hợp với Bootstrap.

module.exports = {
  prefix: 'tw-',
  theme: {
    screens: {
      'sm': '576px',
      'md': '768px',
      'lg': '992px',
      'xl': '1200px',
    }
  }
}

Hướng dẫn can i use bootstrap and tailwind together - tôi có thể sử dụng bootstrap và tailwind cùng nhau không

Tích hợp gulp

Tiếp theo, bạn sẽ cần xử lý CSS của mình để bạn có thể sử dụng nó trong trang web của mình. Một lần nữa bạn có thể thực hiện việc này bằng cách sử dụng NPX, nhưng tôi sẽ đi qua cách thực hiện nó bằng cách sử dụng gulp và postcss.

Đầu tiên, bạn sẽ cần phải mang đến hai phụ thuộc mới:

npm install autoprefixer
npm install gulp-postcss

Sau đó, bạn có thể sử dụng PostcSS để lấy tệp CSS hiện tại của mình, chứa

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
5 nhập của bạn (trong trường hợp của tôi, Style Style.css,) và xây dựng nó thành một tệp CSS mới, sẵn sàng để sử dụng trong HTML của bạn.

const { src, dest } = require('gulp')
const concat = require('gulp-concat')
const postcss = require('gulp-postcss')

function tailwind() {
    return src('styles.css')
        .pipe(postcss([
            require('tailwindcss'),
            require('autoprefixer')
        ]))
        .pipe(concat('tailwind.css'))
        .pipe(dest('./css'))
}

exports.tailwind = tailwind

Bạn nên kết thúc với một tệp Tailwind.css trong thư mục CSS của bạn, phù hợp để được sử dụng cùng với Bootstrap.

Hướng dẫn can i use bootstrap and tailwind together - tôi có thể sử dụng bootstrap và tailwind cùng nhau không

Purgecss

Sử dụng cả Bootstrap và Tailwind có nghĩa là CSS của bạn sẽ bị bồng bềnh với rất nhiều lớp không sử dụng. Vì vậy, như một phần thưởng, hãy để Lôi xem cách bạn có thể sử dụng PURGECSS để tự động xóa các lớp không sử dụng đó, trong khi vẫn chơi độc đáo với Tailwind.

Bạn có thể làm điều này bằng cách sử dụng cấu hình thanh lọc Tailwind (sử dụng PUMGECSS trong nội bộ) hoặc bằng tay.

Với TailWind, điều đó đơn giản như cập nhật TailWind.config.js với tùy chọn thanh lọc:

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
0

Tuy nhiên, nếu bạn đã sử dụng purgecss trong nhiệm vụ gulp của mình như tôi đã làm với Bootstrap, bạn có thể tiếp tục sử dụng điều này, nhưng bạn sẽ cần một số chi tiết cụ thể của đuôi.

Để làm điều này, bạn sẽ cần sử dụng Regex Tailwind khuyến nghị làm mặc định của bạn. Mặt khác, PURGECSS, thật không may, phát hiện các tiền tố điểm dừng của Tailwind là không được sử dụng.

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
1

Bạn có thể thêm đoạn trích này vào Postcss bằng thư viện

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
6 hoặc thêm nó trực tiếp vào một tác vụ gulp hiện có với gói
(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}
7.

Nếu được định cấu hình chính xác, PurGECSS sẽ lấy tệp đuôi của bạn.css từ chỉ dưới 2 megabyte xuống một vài kilobyte.

Mã nguồn

Bạn có thể tìm thấy một triển khai cơ bản của điều này trên GitHub, chứa một tác vụ gulp hoạt động cho các trang HTML và HTML hiển thị các điểm dừng đuôi và bootstrap hoạt động song song.

Nội dung được cấp phép theo CC bởi 4.0. Hãy nhớ rằng, đừng sao chép và dán mã được viết bởi người lạ trên internet.

Tôi có nên sử dụng bootstrap hay đuôi không?

Sự khác biệt giữa CSS Tailwind và Bootstrap là gì? Bootstrap là khung HTML, CSS và JavaScript phổ biến nhất để xây dựng các dự án phản ứng, đầu tiên trên web. Tailwind CSS, mặt khác, là khung CSS đầu tiên tiện ích phổ biến nhất để phát triển UI nhanh.

Tailwind có thể thay thế bootstrap không?

Bootstrap lớn hơn nhiều so với Tailwind và yêu cầu nhiều tệp để truy cập đầy đủ chức năng của nó.Bởi vì điều này, sử dụng bootstrap có nghĩa là kích thước tệp lớn hơn đáng kể so với đuôi.Bootstrap cũng cung cấp các thành phần phản ứng, đầu tiên trên thiết bị di động để tạo trang web hoàn hảo một cách nhanh chóng. and requires multiple files to access its full functionality. Because of this, using Bootstrap means a significantly larger file size than Tailwind. Bootstrap also offers mobile-first, responsive components pre-styled to create flawless website pages quickly.

Tôi có thể sử dụng React Bootstrap và Tailwind không?

Thông thường, thư viện sẽ tạo các thành phần phản ứng khác nhau mô phỏng các thành phần bootstrap và bạn phải nhập chúng để sử dụng chúng trong các thành phần của bạn.Sử dụng Tailwind CSS với React rất dễ dàng. Bạn chỉ cần thực hiện một số thay đổi trong cấu hình, sau đó bạn có thể sử dụng các lớp một cách dễ dàng trong các thành phần của mình.Using Tailwind CSS with React is easy. You just need to make some changes in the configurations, then you can use the classes easily in your components.

Tôi có thể sử dụng bootstrap và CSS cùng một lúc không?

Có. Bạn sẽ muốn đặt các bổ sung của mình vào một tệp riêng và liên kết nó bên dưới liên kết bootstrap.css.Sau đó, bạn có thể thêm các lớp của riêng bạn và/hoặc ghi đè các lớp bootstrap trong tệp của riêng bạn. You will want to put your additions in a separate file and link it below the bootstrap. css link. Then you can add your own classes and/or overwrite the Bootstrap classes in your own file.