Skip to content

Commit eeffa66

Browse files
neojpneojp
committed
Version 1.0.0
0 parents  commit eeffa66

File tree

4 files changed

+139
-0
lines changed

4 files changed

+139
-0
lines changed

‎LICENSE

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Copyright 2019 Joan Piedra
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
6+
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7+
8+
* No Harm: The software may not be used by anyone for systems or activities that actively and knowingly endanger, harm, or otherwise threaten the physical, mental, economic, or general well-being of other individuals or groups, in violation of the United Nations Universal Declaration of Human Rights (https://www.un.org/en/universal-declaration-human-rights/).
9+
10+
* Services: If the Software is used to provide a service to others, the licensee shall, as a condition of use, require those others not to use the service in any way that violates the No Harm clause above.
11+
12+
* Enforceability: If any portion or provision of this License shall to any extent be declared illegal or unenforceable by a court of competent jurisdiction, then the remainder of this License, or the application of such portion or provision in circumstances other than those as to which it is so declared illegal or unenforceable, shall not be affected thereby, and each portion and provision of this Agreement shall be valid and enforceable to the fullest extent permitted by law.
13+
14+
15+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
16+
17+
This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) derived from the MIT License, amended to limit the impact of the unethical use of open source software.

‎README.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<p align="center">
2+
<a href="https://tailwindcss.com/" target="_blank"><img width="200" src="https://tailwindcss.com/img/tailwind.svg"></a><br>
3+
A utility-first CSS framework for rapidly building custom user interfaces.
4+
</p>
5+
6+
---
7+
8+
<br>
9+
10+
# Tailwind CSS `box-sizing` utilities
11+
12+
This is a Tailwind CSS plugin that adds utilities to modifiy the [CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) property: `box-sizing`. It's useful to override defaults coming from [Preflight](https://tailwindcss.com/docs/preflight/) or [normalize.css](https://github.com/necolas/normalize.css/) or any other [CSS reset](https://meyerweb.com/eric/tools/css/reset/).
13+
14+
Maintained by: [Joan Piedra](https://joanpiedra.com) → [@neojp](https://twitter.com/neojp)
15+
16+
## Installation
17+
18+
Install as a node module with either `npm` or `yarn` on your command line
19+
20+
```bash
21+
# Install via npm
22+
npm install --save-dev @neojp/tailwindcss-box-sizing-utilities
23+
24+
# Install via yarn
25+
yarn add --dev @neojp/tailwindcss-box-sizing-utilities
26+
```
27+
28+
Add this module as a plugin on your [Tailwind configuration file](https://tailwindcss.com/docs/configuration#plugins) (`tailwind.config.js`).
29+
30+
```js
31+
module.exports = {
32+
plugins: [
33+
require('@neojp/tailwindcss-box-sizing-utilities')
34+
]
35+
};
36+
```
37+
38+
### Variants
39+
40+
Note that this plugin allows the usage of variants through the key `boxSizing` and will default to your global variant setting.
41+
42+
```js
43+
module.exports = {
44+
variants: {
45+
boxSizing: ['responsive']
46+
}
47+
};
48+
```
49+
50+
## Usage
51+
52+
Use the Tailwind utility classes provided by this plugin.
53+
54+
```html
55+
<div class="border-box"></div>
56+
<div class="content-box"></div>
57+
```
58+
59+
## About overriding browsers' default `box-sizing`
60+
61+
There is a debate about whether `border-box` is better than `content-box`, and how it should be used by default across projects and browsers. Hence it's been included in several popular CSS libraries as a hard-set default. **Preflight** is one of them.
62+
63+
The browsers' default `box-sizing` value is `content-box`.
64+
65+
Overriding the default to `border-box` with **Preflight** or any other CSS reset can do wonders for your project's code, but it can and probably will wreak havoc to third-party code, plugins, and widgets that expect it to be `content-box`.
66+
67+
This utility should help remediate this scenario:
68+
69+
```html
70+
<div class="content-box">
71+
<!-- insert third-party code here -->
72+
</div>
73+
```
74+
75+
My personal preference is to avoid **Preflight**, and just use the `.border-box` utility classes as needed.
76+
77+
## Output
78+
79+
Tailwind will be outputed as follows.
80+
81+
```css
82+
.border-box { box-sizing: border-box; }
83+
.content-box { box-sizing: content-box; }
84+
```
85+
86+
## Contributing
87+
88+
Feel free to [submit an issue](https://github.com/neojp/tailwindcss-box-sizing-utilities/issues) or a [pull request](https://github.com/neojp/tailwindcss-box-sizing-utilities/pulls), and send me a message on Twitter ([@neojp](https://twitter.com/neojp)) about it.
89+
90+
## License
91+
This project has been licensed under [the Hippocratic License](https://firstdonoharm.dev/).

‎index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function addBoxSizingUtilities({ addUtilities, variants }) {
2+
addUtilities({
3+
'.border-box': { boxSizing: 'border-box' },
4+
'.content-box': { boxSizing: 'content-box' },
5+
}, variants('boxSizing'));
6+
};

‎package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@neojp/tailwindcss-box-sizing-utilities",
3+
"description": "Tailwind CSS `box-sizing` utilities",
4+
"version": "1.0.0",
5+
"license": "SEE LICENSE IN LICENSE",
6+
"author": "Joan Piedra <joan@joanpiedra.com>",
7+
"main": "index.js",
8+
"repository": {
9+
"type": "git",
10+
"url": "git+ssh://git@github.com/neojp/tailwindcss-box-sizing-utilities.git"
11+
},
12+
"bugs": {
13+
"url": "https://github.com/neojp/tailwindcss-box-sizing-utilities/issues"
14+
},
15+
"homepage": "https://github.com/neojp/tailwindcss-box-sizing-utilities#readme",
16+
"scripts": {
17+
"test": "echo \"Error: no test specified\" && exit 1"
18+
},
19+
"keywords": [
20+
"tailwindcss",
21+
"tailwindcss-plugin",
22+
"tailwindcss-utilities",
23+
"tailwindcss-utility"
24+
]
25+
}

0 commit comments

Comments
 (0)