https://github.com/saadeghi/tailwindcss-design-systems

https://github.com/saadeghi/tailwindcss-design-systems

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/saadeghi/tailwindcss-design-systems
• Owner: saadeghi
• Created: 2020-07-19T17:54:57.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-28T22:56:08.000Z (over 4 years ago)
• Last Synced: 2025-04-06T03:07:50.505Z (2 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind CSS Design Systems

`⚠️ Work in progress`

Themeable CSS component plugin for Tailwind CSS.  

Optional pre-built CSS components based on famous design systems and pattern libraries including Material Design, Bootstrap and more.

## Why?  

Let's say, you like Tailwind's utility-first approach but you don't want to copy paste same class names for common components (button, input, etc...) everytime.  

You can use pre-built CSS components based on a design system and use your favorie utility classes with them. Let's say you want your custom layout made by Tailwind's utility classes but you want your button's base style to look like Material Design buttons.

## What's included?

Currently buttons and cards  

Material design buttons, Bootstrap cards and buttons, iOS buttons and OSX buttons

I might add more components later.

## How to use?  

Install Tailwind CSS:  

`npm i tailwindcss`

Install Tailwind CSS Design Systems plugin:  

`npm i tailwindcss-design-systems`

Add it to your `tailwind.config.js`:  

```

module.exports = {

    purge: ['./path_to_your_files/**/*.html'],

    theme: {

        designSystem: 'bootstrap', // 👈 choose which design system you want to use [material/bootstrap/ios/macos/...]

    },

    variants: {},

    plugins: [

        require('tailwindcss-design-systems'), // 👈 add this line to enable the plugin

    ],

};

```

## What if I'm not using all the components?  

If you set up `purge` option in your `tailwind.config.js` all unused component styles will be purged, so don't worry about the file size.