🥕 Первое знакомство с популярным фреймворком Tailwind CSS

внешний интерфейс CSS
🥕 Первое знакомство с популярным фреймворком Tailwind CSS

Это 10-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

Что такое Tailwind CSS?

Tailwind CSS — это ориентированная на функции CSS-инфраструктура, которая интегрируется сflex, pt-4, text-center а также rotate-90Такие классы, их можно комбинировать непосредственно в скриптовом языке разметки для построения любого дизайна.

Быстро создавайте современные веб-сайты, не выходя из HTML-кода.

Я уже испытал это, и опыт разработки идеален~🤹‍♂️

шаги установки

На основе ванили (без рамки)

vanilla — это чистый HTML, CSS, JavaScript проект.

1. Инициализируйте package.json

npm init

2. Установите tailwindcss и его зависимостиpostcss,autoprefixer

npm install -D tailwindcss postcss-cli autoprefixer

3. Инициализируйте файлы postcss.config.js и tailwind.config.js.

npx tailwind init -p

Таким образом, эти два файла создаются в нашем корневом каталоге~

4. Создайте новую папку css и загрузите основные компоненты tailwindcss.

Создайте папку css в корневом каталоге, а затем создайте в ней файл style.css.
Загрузите три основных компонента в файл style.css:

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

На этом этапе ваш файл может иметь напоминание в виде волнистой линии, и это нормально.

image.png

5. Настройте postcss

Вы можете спросить, что такое postcss?Вы можете обратиться к этой статье:
Какой к черту postcss?

Добавляем скрипт под файл package.json

"watch": "postcss css/style.css -o dist/style.css --watch"

воплощать в жизньnpm run watchОн выведет style.css в папке css в style.css в папке dist.

Затем мы можем использовать друзей Tailwindcss, новый index.html в стиле DIST Directory.css, затем введен в каталог DIST, конечный каталог документов является это:

image.png

6. Попробуйте использовать

HTML-код:

<h1 class="text-center text-3xl text-red-600 bg-blue-400">一起来学tailwindcss</h1>

Без написания стилей посмотрим на вывод страницы:image.pngКак насчет этого, это здорово, так что нам не нужно самим писать css, что значительно повышает производительность! Конечно, вы можете написать свои стили и использовать препроцессор, за подробностями можно обратиться к официальной документации!
официальная документация tailwindcss

7. Для производственных сред

Теперь мы можем использовать tailwindcss, но это не очень удобно, так как мы видим почти 190 тысяч строк кода в файле style.css.image.pngКод, который мы не используем, также будет упакован. На данный момент нам нужно выполнить некоторую настройку для производственной среды:

Откройте файл tailwind.congif.js и добавьте файл, который будет записывать класс taildwindcss в массив очистки.

image.png

Добавьте узел скрипта в массив package.json.

"build": "cross-env NODE_ENV=production postcss css/style.css -o dist/style.css"

повторно выполнитьnpm run buildКогда мы откроем style.css, мы обнаружим, что упакованный код составляет всего более 600 строк~image.png

наконец

⚽В этой статье представлен процесс настройки популярного фреймворка, позволяющий быстро начать работу с TailwindCSS~
⚾Если эта статья была вам полезна, ставьте лайк и подписывайтесь~
🏀Адрес блога на GitHub:github.com/Awu1227.
🏉У автора есть и другие рубрики, добро пожаловать~
🏐Играйте с красотой CSS
🎱Vue от отказа до входа
🎳Углубленный JavaScript

Категории