[READ-ONLY] Mirror of https://github.com/hacknug/tailwindcss-transform. DEPRECATED: Transform utilities for Tailwind CSS.
www.npmjs.com/package/tailwindcss-transform
Init repository
Nestor Vera
(Aug 14, 2018, 12:48 PM +0200)
022ebfbc
+132
+50
index.js
+50
index.js
···
1
+
module.exports = function (variants) {
2
+
return function ({ addUtilities }) {
3
+
addUtilities(
4
+
{
5
+
// Backface Visibility
6
+
'.backface-visible': { backfaceVisibility: 'visible' },
7
+
'.backface-hidden': { backfaceVisibility: 'hidden' },
8
+
9
+
// Perspective
10
+
// Perspective Origin
11
+
'.perspective-top': { perspectiveOrigin: 'top' },
12
+
'.perspective-right': { perspectiveOrigin: 'right' },
13
+
'.perspective-bottom': { perspectiveOrigin: 'bottom' },
14
+
'.perspective-left': { perspectiveOrigin: 'left' },
15
+
'.perspective-center': { perspectiveOrigin: 'center' },
16
+
17
+
'.perspective-right-top': { perspectiveOrigin: 'right top' },
18
+
'.perspective-right-bottom': { perspectiveOrigin: 'right bottom' },
19
+
20
+
'.perspective-left-top': { perspectiveOrigin: 'left top' },
21
+
'.perspective-left-bottom': { perspectiveOrigin: 'left bottom' },
22
+
23
+
// Transform
24
+
// Transform Box
25
+
'.transform-border': { transformBox: 'border-box' },
26
+
'.transform-fill': { transformBox: 'fill-box' },
27
+
'.transform-view': { transformBox: 'view-box' },
28
+
29
+
// Transform Origin
30
+
'.transform-top': { transformOrigin: 'top' },
31
+
'.transform-right': { transformOrigin: 'right' },
32
+
'.transform-bottom': { transformOrigin: 'bottom' },
33
+
'.transform-left': { transformOrigin: 'left' },
34
+
'.transform-center': { transformOrigin: 'center' },
35
+
36
+
'.transform-right-top': { transformOrigin: 'right top' },
37
+
'.transform-right-bottom': { transformOrigin: 'right bottom' },
38
+
39
+
'.transform-left-top': { transformOrigin: 'left top' },
40
+
'.transform-left-bottom': { transformOrigin: 'left bottom' },
41
+
42
+
// Transform Style
43
+
'.transform-flat': { transformStyle: 'flat' },
44
+
'.transform-preserve': { transformStyle: 'preserve-3d' },
45
+
46
+
},
47
+
variants
48
+
)
49
+
}
50
+
}
+23
package.json
+23
package.json
···
1
+
{
2
+
"name": "tailwindcss-transform",
3
+
"version": "0.1.0",
4
+
"description": "Transform utilities for Tailwind CSS.",
5
+
"main": "index.js",
6
+
"repository": {
7
+
"type": "git",
8
+
"url": "git+https://github.com/hacknug/tailwindcss-transform.git"
9
+
},
10
+
"keywords": [
11
+
"tailwind",
12
+
"tailwindcss",
13
+
"tailwind css",
14
+
"tailwindcss-plugin",
15
+
"plugin"
16
+
],
17
+
"author": "Nestor Vera <nestorvera@me.com> (https://nestor.rip)",
18
+
"license": "MIT",
19
+
"bugs": {
20
+
"url": "https://github.com/hacknug/tailwindcss-transform/issues"
21
+
},
22
+
"homepage": "https://github.com/hacknug/tailwindcss-transform#readme"
23
+
}
+57
readme.md
+57
readme.md
···
1
+
# Tailwind CSS Transform Plugin
2
+
3
+
This plugin adds utilities to use transforms with Tailwind CSS.
4
+
5
+
## Installation
6
+
7
+
Add this plugin to your project:
8
+
9
+
```bash
10
+
# Install using npm
11
+
npm install --save-dev tailwindcss-transform
12
+
13
+
# Install using yarn
14
+
yarn add -D tailwindcss-transform
15
+
```
16
+
17
+
## Notes
18
+
19
+
I will be adding support for customizing the existing values as well as for creating classes for `perspective` and `transform` soon-ish. Feel free to open an issue if you need it before I get to it.
20
+
21
+
## Usage
22
+
23
+
```js
24
+
require('tailwindcss-transform')(['responsive'])
25
+
```
26
+
27
+
```css
28
+
.backface-visible { backface-visibility: visible; }
29
+
.backface-hidden { backface-visibility: hidden; }
30
+
31
+
.perspective-top { perspective-origin: top; }
32
+
.perspective-right { perspective-origin: right; }
33
+
.perspective-bottom { perspective-origin: bottom; }
34
+
.perspective-left { perspective-origin: left; }
35
+
.perspective-center { perspective-origin: center; }
36
+
.perspective-right-top { perspective-origin: right top; }
37
+
.perspective-right-bottom { perspective-origin: right bottom; }
38
+
.perspective-left-top { perspective-origin: left top; }
39
+
.perspective-left-bottom { perspective-origin: left bottom; }
40
+
41
+
.transform-border { transform-box: border-box; }
42
+
.transform-fill { transform-box: fill-box; }
43
+
.transform-view { transform-box: view-box; }
44
+
45
+
.transform-top { transform-origin: top; }
46
+
.transform-right { transform-origin: right; }
47
+
.transform-bottom { transform-origin: bottom; }
48
+
.transform-left { transform-origin: left; }
49
+
.transform-center { transform-origin: center; }
50
+
.transform-right-top { transform-origin: right top; }
51
+
.transform-right-bottom { transform-origin: right bottom; }
52
+
.transform-left-top { transform-origin: left top; }
53
+
.transform-left-bottom { transform-origin: left bottom; }
54
+
55
+
.transform-flat { transform-style: flat; }
56
+
.transform-preserve { transform-style: preserve-3d; }
57
+
```