Tailwind CSS - A utility-first CSS framework for rapid UI development

  •        103

A utility-first CSS framework for rapidly building custom user interfaces. It is packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. It automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.

https://tailwindcss.com
https://github.com/tailwindlabs/tailwindcss

Tags
Implementation
License
Platform

   




Related Projects

oruga - 🐛 Oruga is a lightweight library of UI components without CSS framework dependency

  •    Vue

Oruga doesn't depend on any specific style or CSS framework (like Bootstrap, Bulma, TailwindCSS etc...) and it doesn't provide any grid system or CSS utility, it just offer a set of components easy to customize. Oruga wants you to focus only on UI/UX aspects of your application and be totally flexible to future changes without having to touch a line of JavaScript. Browse online documentation here.

tailwind-starter-kit - Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source

  •    CSS

Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Tailwind Starter Kit comes with 120 Fully Coded CSS elements.

tailwindcss - A Tailwind CSS frontend preset for the Laravel Framework

  •    Blade

A Laravel front-end scaffolding preset for Tailwind CSS - a Utility-First CSS Framework for Rapid UI Development. The default tailwind.config.js configuration file included by this package simply uses the config from the Tailwind vendor files. Should you wish to make changes, you should remove the file and run node_modules/.bin/tailwind init, which will generate a fresh configuration file for you, which you are free to change to suit your needs.

windicss - Next generation utility-first CSS framework.

  •    TypeScript

Next generation utility-first CSS framework. If you are already familiar with Tailwind CSS, think about Windi CSS as an on-demanded alternative to Tailwind, which provides faster load times, fully compatible with Tailwind v2.0 and with a bunch of additional cool features.


smelte - UI framework with material components built with Svelte and Tailwind CSS

  •    Svelte

Smelte is a UI framework built on top of Svelte and Tailwind CSS using Material Design spec (hence the name). It comes with many components and utility functions making it easy to build beautiful responsive layouts while keeping bundle size and performance at check all thanks to Svelte. Then add the Smelte Rollup plugin (after svelte but before css). Webpack support coming soon.

twind - The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

  •    TypeScript

Twind is a small compiler (~13kB) that converts Tailwind classes into actual CSS rules at runtime. If you have used Tailwind or other CSS-in-JS solutions, then most of the API should feel very familiar. Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.

material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design

  •    Javascript

@material-tailwind is an easy to use components library for Tailwind CSS and Material Design. It features multiple React components, all written with Tailwind CSS classes and Material Design guidelines. Coming soon components for VueJS, Angular and many more. Add this repository to your watch list to get the latest news, or join our newsletter community: https://material-tailwind.com/. Import the tailwind.css into your app.js file. Make sure to import the tailwind.css style sheet after all other style sheets.

tailwind-dashboard-template - Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React

  •    Javascript

Mosaic Lite is a responsive dashboard template built on top of TailwindCSS and fully coded in React. It comes with several pre-coded charts (built with Chart.js 3) and widgets, and it's a great starting for anyone who wants to create a user interface for SaaS products, administrator dashboards, modern web apps, and more. Use it for whatever you want, and be sure to reach us out on Twitter if you build anything cool/useful with it.

tailwindcss-custom-forms - A better base for styling form elements with Tailwind CSS.

  •    Javascript

This project is not compatible with Tailwind CSS v2.0+ and has been deprecated in favor of @tailwindcss/forms. You can still use this if you are on Tailwind CSS v1.x, but we recommend updating to v2.0 and migrating to @tailwindcss/forms if possible.

tailwindcss-intellisense - Intelligent Tailwind CSS tooling for Visual Studio Code

  •    TypeScript

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting. In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js in your workspace.

webpack-starter - A quick and simple example of using Tailwind CSS with Webpack.

  •    Javascript

Note: This project is deprecated. It was never a very good starter for real projects since you don't want your CSS framework to dictate your starter webpack setup — better to use vue-cli, create-react-app, etc. We recommend using the tailwindcss/playground starter if you just want a simple project for playing around with Tailwind and PostCSS.

tailwind - 🔥 A schematic that adds Tailwind CSS to Angular applications

  •    TypeScript

This schematic will add Tailwind CSS to your Angular application. IMPORTANT for AngularCLI users: As of April 06 2021, create-nx-workspace@latest still generates Angular with AngularCLI 11.0.7 which does not have built-in TailwindCSS support. Please update AngularCLI by running ng update @angular/cli before running this schematics.

notus-nextjs - Notus NextJS: Free Tailwind CSS UI Kit and Admin

  •    Javascript

Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level. Notus NextJS is Free and Open Source. It features multiple HTML and NextJS elements and it comes with dynamic components for NextJS.

notus-react - Notus React: Free Tailwind CSS UI Kit and Admin

  •    Javascript

Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let Notus React amaze you with its cool features and build tools and get your project to a whole new level. Notus React is Free and Open Source. It features multiple HTML and React elements and it comes with dynamic components for React.

vue-notus - Vue Notus: Free Tailwind CSS UI Kit and Admin

  •    Vue

Start your development with a Free Tailwind CSS and VueJS UI Kit and Admin. Let Vue Notus amaze you with its cool features and build tools and get your project to a whole new level. Vue Notus is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS.

kickoff_tailwind - A rapid Rails 6 application template for personal use bundled with Tailwind CSS

  •    HTML

A rapid Rails 6 application template for personal use. This particular template utilizes Tailwind CSS, a utility-first CSS framework for rapid UI development. Tailwind depends on Webpack so this also comes bundled with webpacker support.

laravel-form-components - A set of Blade components to rapidly build forms with Tailwind CSS (v1

  •    PHP

We proudly support the community by developing Laravel packages and giving them away for free. Keeping track of issues and pull requests takes time, but we're happy to help! If this package saves you time or if you're relying on it professionally, please consider supporting the maintenance and development. If you're using Tailwind, make sure the right plugin (v1 or v2) is installed and configured.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.