https://github.com/log1x/tailwindcss-container-sizes
Simple Tailwind plugin to generate container sizes
https://github.com/log1x/tailwindcss-container-sizes
tailwindcss tailwindcss-plugin
Last synced: 8 months ago
JSON representation
Simple Tailwind plugin to generate container sizes
- Host: GitHub
- URL: https://github.com/log1x/tailwindcss-container-sizes
- Owner: Log1x
- License: mit
- Created: 2019-06-23T16:49:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-29T01:52:31.000Z (over 6 years ago)
- Last Synced: 2025-04-10T08:17:39.095Z (9 months ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 76.2 KB
- Stars: 21
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Tailwind CSS Container Sizes Plugin
## Requirements
- [Tailwind CSS](https://tailwindcss.com/) >= v1.0.0
## Installation
Install via Yarn:
```sh
$ yarn add tailwindcss-container-sizes
```
## Usage
```js
// tailwind.config.js
{
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
container: {
center: true,
padding: '1.5rem',
sizes: {}, // defaults to breakpoint (screens) sizes
},
},
plugins: [
require('tailwindcss-container-sizes')(),
],
}
```
This plugin generates the following utilities:
```css
.container-sm {
max-width: 640px;
margin-right: auto;
margin-left: auto;
padding-right: 1.5rem;
padding-left: 1.5rem
}
.container-md {
max-width: 768px;
margin-right: auto;
margin-left: auto;
padding-right: 1.5rem;
padding-left: 1.5rem
}
.container-lg {
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-right: 1.5rem;
padding-left: 1.5rem
}
.container-xl {
max-width: 1280px;
margin-right: auto;
margin-left: auto;
padding-right: 1.5rem;
padding-left: 1.5rem
}
```
## Testing
Tests are handled with [Jest](https://github.com/facebook/jest) and can be ran using:
```sh
$ yarn run test
```
## Bug Reports
If you discover a bug in Tailwind CSS Container Sizes, please [open an issue](https://github.com/log1x/tailwindcss-container-sizes/issues).
## Contributing
Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.
## License
Tailwind CSS Container Sizes provided under the [MIT License](https://github.com/log1x/tailwindcss-container-sizes/blob/master/LICENSE.md).