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

vuejs javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate