🔴 Если вы используете Sveltekit. Вместо этого ознакомьтесь с этой статьей.
Придя из React, я был поражен тем, насколько простой была разработка с помощью Svelte, некоторые функции, для которых требовалось множество библиотек с React, на самом деле предлагаются прямо из коробки с Svelte. В Svelte так много замечательных вещей, что меня сразу «зацепило» (это не каламбур 😁) после прочтения документации, и я использую его с тех пор.
Tailwind - потрясающая гибкая служебная библиотека CSS, которая позволяет вам писать все свои стили в виде классов HTML. Вот ссылка на отличное руководство, если вы хотите начать с ним.
Я использовал Tailwind с React, и первое, что я искал, обнаружив svelte, было то, как добавить к нему Tailwind CSS. Целью учебника будет дать вам пошаговое руководство, ссылка на репо будет предоставлена в конце этого руководства.
В этом уроке мы будем использовать PostCSS, перейдите по этой ссылке, чтобы узнать об этом все, если вы новичок в этом.
Создайте приложение Svelte
Прежде всего, создайте изящное приложение, введя следующую команду.
npx degit sveltejs/template your-awesome-project cd your-awesome-project && yarn #Or if you are using npm npx degit sveltejs/template your-awesome-project cd your-awesome-project && npm install
Добавить зависимости разработчика
Это было просто! Затем установите следующие зависимости разработчика.
yarn add -D autoprefixer postcss-cli tailwindcss concurrently cross-env #Or if you are using npm npm install autoprefixer postcss-cli tailwindcss concurrently cross-env --save-dev
Пакет cross-env позволит вам установить переменные среды в сценариях package.json, если вы работаете с Windows, поскольку обычная команда ENV_VAR = value вызовет ошибку.
😷 Эй, погоди! Это я из будущего с быстрым обновлением…
[ОБНОВЛЕНИЕ]
Tailwind v2 и PostCSS v8 только что упали, и во время этого обновления (2020–11–23) вы можете столкнуться с критическими изменениями.
Со временем это будет исправлено, но пока вот комбо, которое подойдет вам, если вы хотите использовать последнюю версию попутного ветра:
👉 tailwindcss @ npm: @ tailwindcss / postcss7-compat
👉 postcss @ ^ 7
👉 autoprefixer @ ^ 9
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli@^7 autoprefixer@^9 concurrently cross-env -D #OR With NPM npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli@^7 autoprefixer@^9 concurrently cross-env --save-dev
Прочтите это, чтобы узнать больше: 👉 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build
Теперь, когда это сделано, я передам контроль другому себе из прошлого 👇
Настроить CSS для сообщений и попутный ветер
Грубое прерывание! Давай просто продолжим ...
В корневом каталоге вашего проекта создайте файлы конфигурации Post CSS и Tailwind:
touch postcss.config.js public/tailwind.css npx tailwindcss init
В postcss.config.js вставьте это:
module.exports = () => ({
plugins: [
require("tailwindcss"),
require("autoprefixer")
],
})
В public / tailwind.css:
@tailwind base; @tailwind components; @tailwind utilities;
Скрипты Npm
Добавьте следующие скрипты в свой package.json (замените исходные значения, установленные svelte)
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"build": "yarn run build:tailwind && rollup -c",
"start": "sirv public",
"serve": "serve public -p 80",
"dev": "concurrently \"rollup -c -w\" \"yarn run watch:tailwind\""
},
В сценарии разработки одновременно разрешает работать svelte-серверу вместе с PostCSS, который будет следить за вашим попутным ветром и генерировать файл index.css в общей папке вашего проекта.
Запуск сервера
yarn run dev #Or if you are using npm npm run dev
Откройте http: // localhost: 5000
Импортируйте созданный стиль попутного ветра в свой проект
Откройте index.html из общей папки корневого каталога проекта и импортируйте index.css, созданный PostCSS.
<!-- Paste me in public/index.html --> <link rel='stylesheet' href='/index.css'>
Точно так же вы добавили CSS попутного ветра в свое стройное приложение.
И последнее: файл попутного ветра может стать действительно большим, вроде мегабайтов. В index.css много неиспользуемых классов CSS. Это нормально в режиме разработки, но вы не хотите отправлять это своим клиентам.
К счастью, для этого есть решение.
Очистите свой CSS
⚠ Эта часть руководства не потребуется, если у вас включен JIT в файле tailwind.config.js.
Если вы не знаете, что такое JIT, вот отличная статья, которая поможет вам быстрее (https://tailwindcss.com/docs/just-in-time-mode).
Если у вас не включен JIT, я с вами еще не закончил, продолжайте прокручивать…;)
Очистка CSS может потребовать больших ресурсов процессора и замедлить работу вашей среды, если вы будете делать это в режиме разработки.
По этой причине ваш CSS будет очищен только тогда, когда NODE_ENV настроен на производство. это значение устанавливается на этапе сборки (см. сценарий сборки в package.json).
в tailwind.config.js (корневой каталог) введите следующий код:
purge: ["./src/**/*.svelte", "./src/**/*.html"],
Вот и все! Теперь вы можете использовать все свои классы попутного ветра в svelte.
Спасибо, что нашли время прочитать!
Не будь чужим! Обращайтесь ко мне, если у вас возникнут какие-либо проблемы, и я буду более чем счастлив помочь!
Вам понравилась эта статья? оставьте отзыв и поделитесь им с тем, кто может найти его полезным.
Ссылки:
🔗 Репозиторий проектов
🔗 Попутный ветер с SvelteKit
Уровень кодирования
Спасибо, что стали частью нашего сообщества! Подпишитесь на наш канал YouTube или присоединитесь к Интервью по программированию Skilled.dev.
