Skip to content
A Tailwind CSS Component Library for Vue.js
Vue JavaScript Other
Branch: master
Clone or download
Latest commit 9abdd8c Nov 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs adding install docs Aug 23, 2019
public add in component progress Aug 22, 2019
src
tests/unit cleanup, and fix base styles Oct 5, 2019
.browserslistrc add in component progress Aug 22, 2019
.editorconfig add in component progress Aug 22, 2019
.eslintingnore cleanup, add details to readme Aug 28, 2019
.eslintrc.js progress on pagination Oct 21, 2019
.gitignore add in component progress Aug 22, 2019
LICENSE Update LICENSE Aug 29, 2019
README.md remove image Oct 8, 2019
babel.config.js update packages Oct 16, 2019
jest.config.js add in component progress Aug 22, 2019
package-lock.json 0.1.0-alpha.14 Nov 13, 2019
package.json 0.1.0-alpha.14 Nov 13, 2019
postcss.config.js
tailwind.config.js progress on dropdown menu Oct 9, 2019
vue.config.js add in component progress Aug 22, 2019
yarn.lock add new checkbox and radio style, update packages Nov 11, 2019

README.md

Tailwindcss-Vue

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

Licence NPM

Install

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.

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

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).

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.

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 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.

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').

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.

npm run docs:dev

or

yarn docs:dev

More Coming Soon

License

Code released under MIT license.

Thanks to

Code based on, and inspiration from, Buefy and Element component libraries.

Also, the theme concept is based on Vue-Tailwind which is an alternative Tailwind CSS Vue component framework.

You can’t perform that action at this time.