FlowBite - Tailwind CSS Components Library

FlowBite is an open-source set of UI components and elements built with the utility-first Tailwind CSS framework. It includes multiple components such as buttons, alerts, modals, dropdowns, cards, navbars and many more.

Documentation

We recommend you to read the documentation and follow the instructions directly from there as you will be able to find everything from getting started, browsing the components and building for production.

Quickstart

There are multiple ways that you can include it into your project.

We recommend setting up your project using the build tools guide to be able to build for production.

Include via CDN

The quickest way to get started working with FlowBite is to simply include the CSS and JavaScript into your project via CDN.

Require the following stylesheet inside the head tag:

<link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.min.css" />

And include the following javascript file before the end of the body element:

<script src="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.bundle.js"></script>

Important: This is not the recommended way of working with FlowBite because you won't be able to purge the unnecessary CSS. Check out the build tools to properly set up FlowBite for development and production code.

Require via NPM

You can also require FlowBite as a dependency using NPM by running the following command:

npm i @themesberg/flowbite

Upgrade to pro

There is also a pro version of FlowBite available featuring more components, an application UI layout, marketing UI pages, e-commerce pages and also Figma design files.

Check it out here: flowbite.com

#flowbite #tailwindcss #tailwind #webdev

What is GEEK

Buddha Community

FlowBite - Tailwind CSS Components Library

Elvis Miranda

1578029098

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

Tailwindcss-Vue

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.

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

CSSeffectsSnippets

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.

Vue Cirrus

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.

Vue CSS Modules

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.

BG MixMaster 90

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

CSSOBJ

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

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

#css #vue-css #css-component #vue-css-component #vue-js

Gavin Sserubiri

1620463500

Material Tailwind – CSS Components Library

Have a quick look at this components library created with Tailwind CSS & Material Design standards. It implements React components. A version for use with VueJS & Angular will be available soon. Find out more Tailwind tools .

#material tailwind #tailwind #css

hourly developer

1596530868

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Zoltan Szogyenyi

1602955151

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

Introducing Tailwind CSS
Adding Tailwind CSS to your project via a package manager
Creating the configuration file and process your CSS with Tailwind
Building a responsive hero section using the utility-first classes from Tailwind
Customize fonts, colors and add extra classes using the configuration file
Reduce loading time and file size by purging the unused classes from your CSS
Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source

Tailwind CSS Tutorial

1635323718