Romych в 11:48, 15 жовтня 2021

2021-10-15T11:48:27Z

Нова сторінка

← [[Tailwind]]

== Репозитории для быстрой установки Tailwind + Vue ==

=== Vite + Vue 3 + Tailwind CSS (starter) ===

https://github.com/web2033/vite-vue3-tailwind-starter

=== Наш tailwind-vue-app ===

Репозиторий: https://gitlab.com/romychvk/tailwind-vue-app

== Чистая установка минимального проекта Vue + Tailwind ==

Подготовьте систему — установите [https://v3.ru.vuejs.org/ru/guide/installation.html#cli Vue CLI]:

sudo npm install -g @vue/cli

Создайте стандартное минимальное приложение Vue:

vue create <your-project-name>

В конце будет предложено перейти в папку проекта и протестировать приложение.

Перейдите в папку проекта и обновите Vue и установите Tailwind CSS:

vue upgrade --next
npm install tailwindcss

<div class="note">

== Структура файлов проекта Vue + Tailwind ==

* <code>public/index.html</code> — сюда автоматически вставляется приложение
* <code>src/main.js</code> — основной JS, который вставляется в <code>index.html</code>. В нем же подключается основной CSS
* <code>src/App.vue</code> — приложение Vue
* <code>src/components/</code> — здесь создаем файлы <code>.vue</code> компонентов приложения
* <code>postcss.config.js</code> — конфиг PostCSS, через который включается Tailwind
* <code>tailwind.config.js</code> — опциональный конфиг, который ищет Tailwind и который используется для его настройки
* <code>src/assets/styles/index.css</code> — основной CSS файл, в котором подключаются библиотеки Tailwind и можно добавлять свои стили
</div>

== Настройка ==

Tailwind — это плагин PostCSS и подключается он через конфиг PostCSS.

Создайте конфигурационный файл:

touch postcss.config.js

и настройте в нем подключение Tailwind:

<source lang="javascript">
// postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
</source>

Создайте основной файл CSS стилей Tailwind:

mkdir -p src/assets/styles/
touch src/assets/styles/index.css

и добавьте в него строки:

<source lang="javascript">
/* src/assets/styles/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
</source>

и подключите его к приложению в файле <code>src/main.js</code>:

<source lang="javascript">
// src/main.js
// ...
import App from './App.vue'

import './assets/styles/index.css';
// ...
</source>

== Создание нового компонента ==

Например, создадим компонент Navbar, как описано в скринкасте [https://tailwindcss.com/course/building-a-navbar-layout-with-flexbox Building a Navbar Layout with Flexbox]

touch src/components/Navbar.vue

<source lang="javascript">
// src/components/Navbar.vue

<template>
// сюда вставьте HTML шаблон: https://tailwindcss.com/components/navigation#responsive-header
</template>

<script>
export default {
name: 'Navbar'
}
</script>
</source>

Подключите компонент — отредактируйте <code>src/App.vue</code> и добавьте Navbar в трех местах:

<source lang="javascript">
// src/App.vue

<template>
<Navbar /> 
<img alt="Vue logo" src="./assets/logo.png" class="mx-auto" />
<HelloWorld msg="Welcome to Your Vue.js App" class="text-center" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Navbar from './components/Navbar.vue' // (2)

export default {
name: 'App',
components: {
HelloWorld,
Navbar // (3)
}
}
</script>
</source>

Теперь запустите сервер и убедитесь, что навбар появился:

npm run serve

== См. также ==

* [https://dev.to/lukeocodes/using-tailwind-css-with-vue-js-b1b Using Tailwind CSS with Vue.js]
* [https://snipcart.com/blog/tailwind-vue-tutorial Setting Up Tailwind CSS in a Vue.js Project] (в статье неправильный репозиторий в команде клонирования — правильный этот https://github.com/snipcart/vue-tailwind)
* [https://github.com/AlexandreBonaventure/vue-mq Vue MQ (MediaQuery)] — 📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.

Tailwind и Vue - Історія редагувань

Romych в 11:48, 15 жовтня 2021