vue.js 组件css_Vue.js的Tailwind CSS组件库

vue.js 组件css

Tailwindcss-Vue (Tailwindcss-Vue)

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Tailwindcss-Vue是使用Tailwind CSS实用程序优先CSS框架构建的Vue.js UI组件库。

安装 (Install)

npm (npm)

npm install @advanced-data-machines/tailwindcss-vue

纱 (yarn)

yarn add @advanced-data-machines/tailwindcss-vue

用法 (Usage)

import Vue from 'vue';
// styles for transitions and other base options
import '@advanced-data-machines/tailwindcss-vue/dist/tailwindcss-vue.css';
import TailwindcssVue from '@advanced-data-machines/tailwindcss-vue';

Vue.use(TailwindcssVue);

基本主题期望 (Base Theme Expectations)

Use of this project assumes you are using PostCSS and Tailwind CSS in your Vue project.

使用此项目时，假定您在Vue项目中使用PostCSS和Tailwind CSS。

postcss.config.js (postcss.config.js)

// replace './tailwind.config.js' to your own config path
module.exports = {
	plugins: [
		require('tailwindcss')('./tailwind.config.js'),
		require('autoprefixer')
	]
};

tailwind.config.js (tailwind.config.js)

This file is likely to change to base color scheme without the need for custom color names

该文件可能会更改为基本配色方案，而无需自定义颜色名称

const { colors } = require('tailwindcss/defaultTheme');
// variant defaults
// https://tailwindcss.com/docs/configuring-variants/#default-variants-reference
module.exports = {
	theme: {
		extend: {
			spacing: {
				'9': '2.25rem',
				'11': '2.75rem',
				'14': '3.5rem',
				'18': '4.5rem'
			},
			fontSize: {
				'xxs': '0.625rem'
			},
			stroke: {
				...colors
			}
		},
		container: {
			center: true
		}
	},
	variants: {
		borderColor: ['responsive', 'hover', 'focus', 'first', 'last'],
		borderRadius: ['responsive', 'first', 'last'],
		borderWidth: ['responsive', 'first', 'last'],
		margin: ['responsive', 'before', 'first', 'last'],
		textColor: ['responsive', 'hover', 'focus', 'before']
	},
	plugins: [
		function({ addVariant, e }) {
			addVariant('before', ({ modifySelectors, separator }) => {
				modifySelectors(({ className }) => {
					return `.${e(`before${separator}${className}`)}:before`;
				});
			});
		}
	]
};

本地开发/运行 (Developing/Running Locally)

Clone the repo to your computer then change to the project directory. Once in the root of the project, use the install command with your dependency manager of choice (yarn or npm).

将存储库克隆到您的计算机，然后更改到项目目录。 进入项目的根目录后，将install命令与您选择的依赖项管理器(yarn或npm)一起使用。

cd tailwindcss-vue
npm install

or

要么

cd tailwindcss-vue
yarn install

The project is set up with a Vue SPA playground to test components. In the root of the project directory you can run the development server with the serve command.

该项目设有Vue SPA游乐场，以测试组件。 在项目目录的根目录中，可以使用serve命令运行开发服务器。

npm run serve

or

要么

yarn serve

You can also build the project and serve it to another local project using npm link or the equivalent yarn link. While still in the root of the project directory, run the build:bundle command.

您还可以使用npm链接或等效的yarn链接来构建项目并将其提供给另一个本地项目。 仍在项目目录的根目录下，运行build：bundle命令。

npm run build:bundle

or

要么

yarn build:bundle

This will add the build to the 'dist' folder as a consumable library. Once completed, run the npm link command.

这会将构建作为耗材库添加到“ dist”文件夹中。 完成后，运行npm link命令。

npm link

Next, in the project you wish to link, run the npm link tailwindcss-vue in the same directory as the package.json file. This will add the project to the global scope to be referenced as a traditional installed npm package (import TailwindcssVue from '@advanced-data-machines/tailwindcss-vue').

接下来，在要链接的项目中，在与package.json文件相同的目录中运行npm链接tailwindcss-vue 。 这会将项目添加到全局范围中，以作为传统的已安装npm软件包引用(从“ @ advanced-data-machines / tailwindcss-vue”导入TailwindcssVue)。

npm link @advanced-data-machines/tailwindcss-vue

本地文件 (Local Docs)

This project is bundled with VuePress to generate its documentation. You can run it locally by running the docs:dev run command. The docs are currently a work-in-progress.

该项目与VuePress捆绑在一起以生成其文档。 您可以通过运行docs：dev run命令在本地运行它。 该文档目前正在开发中。

npm run docs:dev

or

要么

yarn docs:dev

翻译自: https://vuejsexamples.com/a-tailwind-css-component-library-for-vue-js/

vue.js 组件css