Tailwind CSS Tables Plugin
This plugin generates bootstrap styled tables in Tailwind CSS. Anything in the bootstrap tables documentation should work.
Installation
# With NPM npm install tailwindcss-tables --save # With Yarn yarn add tailwindcss-tables # Manually # Create a /plugins/tailwindcss-tables folder in your project and drop 'index.js' inside of it.
Usage
To use the plugin, simply require it in your Tailwind config file.
plugins: // Other plugins... // If pulled in manually...
You can now use any of bootstrap's table classes in your project.
Examples
Basic example from bootstrap docs:
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
Using Tailwind's utilities
You are free to use Tailwind's utilities to customize the table. Works with Tailwind v1.0 or pre Tailwind v1.0. Just adjust your class names.
# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
Customization
I've exposed a few options that are a bit cumbersome to change using utilities.
plugins: // Other plugins... cellPadding: '.75rem' // default: .75rem tableBorderColor: '#dee2e6' // default: #dee2e6 tableStripedBackgroundColor: 'rgba(0,0,0,.05)' // default: rgba(0,0,0,.05) tableHoverBackgroundColor: 'rgba(0,0,0,.075)' // default: rgba(0,0,0,.075) tableBodyBorder: true // default: true. If set to false, borders for the table body will be removed. Only works for normal tables (i.e. does not apply to .table-bordered) verticalAlign: 'top' // default: 'top'
Again, have a look at bootstrap's tables documentation for other options. For example, wrap your table in a div.table-responsive
class and your table should be responsive.