Getting Started with Vue using Tailwind CSS

Getting Started with Vue using Tailwind CSS

In this Vue.js tutorial explains how to get started with Vue using Tailwind CSS. Tailwind CSS is a utily first class library! With it you can create visual design easily!

Tailwind CSS is a utily first class library! With it you can create visual design easily! In this video I explain how to get started with Vue using it!

7 Best Vue CSS Component for Your App

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

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

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

How to get started with Vue using Tailwind CSS

How to get started with Vue using Tailwind CSS

Tailwind CSS with Vue - How to get started with Vue using Tailwind CSS. Tailwind CSS is a utily first class library! Tailwind CSS - A utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS is a utily first class library! With it you can create visual design easily! In this video I explain how to get started with Vue using it!

A Tailwind CSS Component Library for Vue.js

A Tailwind CSS Component Library for Vue.js

vue UI components with configurable classes ready for TailwindCSS - alfonsobries/vue-tailwind. ... 5 months ago. vue.config.js · export as library. A Tailwind CSS Component Library for Vue.js

Tailwindcss-Vue

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

Install

npm

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

yarn

source-shell
yarn add @advanced-data-machines/tailwindcss-vue
Usage
source-js
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

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

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

source-shell
cd tailwindcss-vue
npm install

or

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

source-shell
npm run serve

or

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

source-shell
npm run build:bundle

or

source-shell
yarn build:bundle

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

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

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

source-shell
npm run docs:dev

or

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

Github

advanced-data-machines/tailwindcss-vue