TailwindCSS официально называет его фреймворком, позволяющим избавляться от css-файлов и изменять стили напрямую через класс в html.
Но TailwindCSS был предметом многочисленных споров по поводу схемы CSS. Первый вопрос: в чем разница между этим и стилем написания css?
Четыре степени детализации css
Прежде всего, в нашем стиле изменения стилей CSS мы будем использовать примерно 4 метода.
<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>
<div class="rounded-lg p-4"> Click </div>
<div class="button"> Click </div>
<Button> Click </Button>
Чем дальше вы спускаетесь, тем больше степень детализации, выше ограничения и меньше свободы. а также TailwindCSSРасположен на втором этаже.
Первый слой трудно использовать повторно, поэтомуTailwindCSSПричина выбора второго яруса.
Преимущества использования TailwindCSS
Не так давно рефакторинг тома css Facebook был восстановлен до исходных 413 КБ. Сжато до 74кб.
Но многие разработчики очень запутались. Мой файл css вышел из строя, но мои файлы html и компоненты стали чрезвычайно большими, я не знаю, в чем здесь преимущества?
Во-первых, текущий режим разработки — это уже разработка компонентов, даже если вы работаете над поддержкой CSS. На самом деле в этом компоненте много атрибутов стиля, и этот компонент также используется повторно. Это не обязательно, здесь стиль компонента остается за самим компонентом.
Второй момент - подумать об этом сомнении.По оценкам, я не узнал о gzip nginx. Просто знайте, что есть такое.
Ядро gzip, Deflate, использует для сжатия файлов алгоритм LZ77 и кодировку Хаффмана.Чем больше повторяющихся файлов, тем больше места они могут сжать.
Даже если размер HTML увеличится из-за слишком большого количества имен классов, gzip получит большую степень сжатия, поскольку классы очень похожи.
Это то, чего хочет TailwindCSS
Отзывчивый:
первый раз я используюtailwind uiПри кадрировании во многих случаях используют следующий способ письма.
class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
Deactivate account
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">
Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.
</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
Deactivate
</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancel
</button>
</div>
</div>
</div>
</div>
Вы можете написать столько значений, сколько хотите.
Есть также соответствующие отзывчивые
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
С какими @медиа вам удобнее?
@media (min-width: 1024px) {
.container { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 768px) {
.container { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.conainer { display: grid; gap: 1rem; }
Третий заключается в более позднем обслуживании, даже если кто-то убежит, с таким количеством CSS, что людям, стоящим за ним, нужно только смотреть на html, чтобы поддерживать его. Не торопитесь, чтобы найти так много файлов css, я все равно не хочу их искать.
Четвертая компиляция Jit css с использованием TailwindCSS в процессе компиляции выполняется быстрее, чем css-loader less-loader
Учитывая все эти преимущества, каковы недостатки TailwindCSS? Позвольте мне сказать вам мое мнение.
Когда вы впервые сталкиваетесь со сложными операциями css, вы не можете использовать их напрямую.TailwindCSSдействовать
.container:hover .drowload{
display: block;
}
Например, в приведенной выше ситуации вам нужно написать css для управления отображением дочерних элементов, если вам не скучно и вам не нужно использовать js для записи, это не невозможно.
Второй — увеличить нагрузку на память.Его название отличается от использования в вашем познании.На начальном этапе нужно постоянно сверяться с документацией, или скачивать плагин подсказки TailwindCSS. Иначе можно не начинать.
А вот когда привыкнешь и выработаешь условный рефлекс, тогда другая ситуация, будешь просто ладан орать.
Суммировать
Если вы делаете ускорение кода, вы можете попробовать Tailwindcss. Поскольку GZIP действительно маленький.
Если вы бросаете, попробуйте TailwindCSS.
Если вы чувствуете, что ваш компонент уже может использовать CSS совершенно независимо, вы можете использовать TailwindCSS для создания этого компонента. Когда вы захотите позже изменить код, вам нужно изменить только этот компонент, и вам не нужно беспокоиться о том, что ваш класс повлияет на компоненты других людей.