Как настроить приложение Vue js для использования Tailwind CSS

Простое руководство по использованию TailwindCSS в вашем следующем проекте Vue.

Что такое TailwindCSS?

Tailwind - это CSS-фреймворк для быстрого создания пользовательских интерфейсов. Tailwind отличается от таких фреймворков, как Bootstrap, Foundation или Bulma, тем, что это не комплект пользовательского интерфейса. У него нет темы по умолчанию и нет встроенных компонентов пользовательского интерфейса. С другой стороны, он также не имеет мнения о том, как должен выглядеть ваш сайт, и не навязывает дизайнерских решений, от которых вам нужно бороться.

По сути, Tailwind дает вам полный контроль над тем, как работают ваши веб-сайты, и не содержит «мусора», который вам не понадобится в вашем проекте.

Давайте перейдем к использованию Tailwindcss в нашем проекте vue.

Создайте новый проект Vue

Откройте свой терминал и введите следующие команды

vue init myProjectName если вы используете Vue 2 CLI или vue create myProjectName for Vue 3

cd myProjectName, чтобы перейти в каталог проекта.

Установите попутный ветер с помощью npm

npm install tailwindcss --save-dev

или используя пряжу

yarn add tailwindcss --dev

Создайте файл конфигурации Tailwind.js

Введите следующее, чтобы создать tailwind.js файл конфигурации

./node_modules/.bin/tailwind init tailwind.js

or

npx tailwind init tailwind.config.js --full

Настройка PostCSS

Создайте файл postcss.config.js touch postcss.config.js

Затем перейдите к настройке Postcss для обработки попутного ветра. Сделайте это, добавив следующий код в свой postcss.config.js файл.

Удалите все конфигурации попутного ветра из package.json

Удалите следующие строки кода из файлаpackage.json

Создайте файл CSS

Перейдите к src/assets/css и создайте новый tailwind.css файл в вашейcssпапке, затем добавьте следующий

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

Импортируйте Tailwind в свое приложение vue

Откройте ваш main.js файл и добавьте:

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

Проверьте, что это работает

Отредактируйте файл с именем Helloworld.vue в папке просмотров и добавьте следующее между тегами шаблона:

Должно получиться что-то вроде:

Следующий шаг?

Продолжайте создавать потрясающие вещи! 💪💪

Спасибо, что дочитали до этого места. Если вам понравился этот пост, поделитесь, прокомментируйте и нажмите 👏 несколько раз (до 50 раз). . . Может быть, это кому-то поможет.

Подпишитесь на меня в Твиттере и на Medium, если вас интересуют более подробные и информативные статьи, подобные этой, в будущем!