├── .gitignore ├── .release-it.json ├── CHANGELOG.md ├── README.md ├── index.js ├── package-lock.json ├── package.json └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "src": { 3 | "tagName": "v%s" 4 | } 5 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 6 | and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | ## [1.0.2] - 2018-11-04 9 | 10 | ### Added 11 | - Added proper tests with Jest 12 | 13 | ## [1.0.1] - 2018-08-14 14 | 15 | ### Changed 16 | - Renamed the `pin` option to `offset`, and removed the `pin-` prefix from the generated classes (now only `t-[key]`, `r-[key]`, etc.) 17 | - The `aspect-ratio` classes now only set `padding-bottom` 18 | 19 | ### Fixed 20 | - Fixed escaping in selectors generated by the plugin 21 | 22 | ## 1.0.0 - 2018-05-06 23 | 24 | Initial release 25 | 26 | [Unreleased]: https://github.com/benface/tailwindcss-layout/compare/v1.0.2...HEAD 27 | [1.0.2]: https://github.com/benface/tailwindcss-layout/compare/v1.0.1...v1.0.2 28 | [1.0.1]: https://github.com/benface/tailwindcss-layout/compare/v1.0.0...v1.0.1 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⛔️ DEPRECATED 2 | 3 | Tailwind CSS 1.0 (released in May 2019) now includes everything that this plugin used to offer except aspect ratio utilities. Therefore you should be using the smaller, more appropriately named [`tailwindcss-aspect-ratio`](https://github.com/webdna/tailwindcss-aspect-ratio) plugin instead. Thank you! 4 | 5 | # Layout Tailwind CSS Plugin 6 | 7 | ## Installation 8 | 9 | ```bash 10 | npm install tailwindcss-layout 11 | ``` 12 | 13 | ## Usage 14 | 15 | ```js 16 | // In your Tailwind CSS config 17 | { 18 | plugins: [ 19 | require('tailwindcss-layout')({ 20 | variants: ['responsive'], 21 | offset: { 22 | 'full': '100%', 23 | }, 24 | flexGrow: { 25 | '2': '2', 26 | '3': '3', 27 | }, 28 | flexShrink: { 29 | '2': '2', 30 | '3': '3', 31 | }, 32 | order: { 33 | '1': '1', 34 | }, 35 | aspectRatio: { 36 | '1/2': 1/2, 37 | '16/9': 16/9, 38 | }, 39 | }), 40 | ], 41 | } 42 | ``` 43 | 44 | This plugin generates the following utilities: 45 | 46 | ```css 47 | /* configurable with the "offset" option */ 48 | .t-[name] { 49 | top: [value]; 50 | } 51 | .r-[name] { 52 | right: [value]; 53 | } 54 | .b-[name] { 55 | bottom: [value]; 56 | } 57 | .l-[name] { 58 | left: [value]; 59 | } 60 | 61 | /* configurable with the "flexGrow" option */ 62 | .flex-grow-[name] { 63 | flex-grow: [value]; 64 | } 65 | 66 | /* configurable with the "flexShrink" option */ 67 | .flex-shrink-[name] { 68 | flex-shrink: [value]; 69 | } 70 | 71 | /* configurable with the "order" option */ 72 | .order-[name] { 73 | order: [value]; 74 | } 75 | 76 | /* configurable with the "aspectRatio" option */ 77 | .aspect-ratio-16\/9 { 78 | padding-bottom: 56.25%; 79 | } 80 | ``` 81 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash'); 2 | 3 | module.exports = ({ 4 | variants = {}, 5 | offset = {}, 6 | flexGrow = {}, 7 | flexShrink = {}, 8 | order = {}, 9 | aspectRatio = {}, 10 | } = {}) => ({ e, addUtilities }) => { 11 | addUtilities( 12 | { 13 | ...Object.assign( 14 | {}, 15 | ..._.map(offset, (value, name) => ({ 16 | [`.${e(`t-${name}`)}`]: { top: value }, 17 | [`.${e(`r-${name}`)}`]: { right: value }, 18 | [`.${e(`b-${name}`)}`]: { bottom: value }, 19 | [`.${e(`l-${name}`)}`]: { left: value }, 20 | })), 21 | ..._.map(flexGrow, (value, name) => ({ 22 | [`.${e(`flex-grow-${name}`)}`]: { flexGrow: value }, 23 | })), 24 | ..._.map(flexShrink, (value, name) => ({ 25 | [`.${e(`flex-shrink-${name}`)}`]: { flexShrink: value }, 26 | })), 27 | ..._.map(order, (value, name) => ({ 28 | [`.${e(`order-${name}`)}`]: { order: value }, 29 | })), 30 | ..._.map(aspectRatio, (value, name) => ({ 31 | [`.${e(`aspect-ratio-${name}`)}`]: { paddingBottom: `${1 / value * 100}%` }, 32 | })), 33 | ), 34 | }, 35 | variants, 36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-layout", 3 | "version": "1.0.2", 4 | "description": "Tailwind CSS plugin to generate layout utilities", 5 | "author": "Benoît Rouleau ", 6 | "license": "ISC", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/benface/tailwindcss-layout.git" 10 | }, 11 | "bugs": "https://github.com/benface/tailwindcss-layout/issues", 12 | "homepage": "https://github.com/benface/tailwindcss-layout", 13 | "scripts": { 14 | "test": "jest", 15 | "release": "f(){ release-it $1 && github-release-from-changelog ;};f" 16 | }, 17 | "dependencies": { 18 | "lodash": "^4.17.10" 19 | }, 20 | "devDependencies": { 21 | "github-release-from-changelog": "^1.3.2", 22 | "jest": "^23.6.0", 23 | "jest-matcher-css": "^1.0.3", 24 | "postcss": "^7.0.5", 25 | "release-it": "^7.6.2", 26 | "tailwindcss": "^0.7.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | const _ = require('lodash'); 2 | const cssMatcher = require('jest-matcher-css'); 3 | const postcss = require('postcss'); 4 | const tailwindcss = require('tailwindcss'); 5 | const defaultConfig = require('tailwindcss/defaultConfig')(); 6 | const layoutPlugin = require('./index.js'); 7 | 8 | const disabledModules = {}; 9 | Object.keys(defaultConfig.modules).forEach(module => { 10 | disabledModules[module] = false; 11 | }); 12 | 13 | const generatePluginCss = (options = {}) => { 14 | return postcss(tailwindcss({ 15 | modules: disabledModules, 16 | plugins: [layoutPlugin(options)], 17 | })).process('@tailwind utilities;', { 18 | from: undefined, 19 | }).then(result => { 20 | return result.css; 21 | }); 22 | }; 23 | 24 | expect.extend({ 25 | toMatchCss: cssMatcher, 26 | }); 27 | 28 | test('there is no output by default', () => { 29 | return generatePluginCss().then(css => { 30 | expect(css).toMatchCss(``); 31 | }); 32 | }); 33 | 34 | test('all the options are working as they should', () => { 35 | return generatePluginCss({ 36 | offset: { 37 | 'full': '100%', 38 | }, 39 | flexGrow: { 40 | '2': '2', 41 | '3': '3', 42 | }, 43 | flexShrink: { 44 | '2': '2', 45 | '3': '3', 46 | }, 47 | order: { 48 | '1': '1', 49 | }, 50 | aspectRatio: { 51 | '1/2': 1 / 2, 52 | '16/9': 16 / 9, 53 | }, 54 | }).then(css => { 55 | expect(css).toMatchCss(` 56 | .t-full { 57 | top: 100%; 58 | } 59 | .r-full { 60 | right: 100%; 61 | } 62 | .b-full { 63 | bottom: 100%; 64 | } 65 | .l-full { 66 | left: 100%; 67 | } 68 | .flex-grow-2 { 69 | flex-grow: 2; 70 | } 71 | .flex-grow-3 { 72 | flex-grow: 3; 73 | } 74 | .flex-shrink-2 { 75 | flex-shrink: 2; 76 | } 77 | .flex-shrink-3 { 78 | flex-shrink: 3; 79 | } 80 | .order-1 { 81 | order: 1; 82 | } 83 | .aspect-ratio-1\\/2 { 84 | padding-bottom: 200%; 85 | } 86 | .aspect-ratio-16\\/9 { 87 | padding-bottom: 56.25%; 88 | } 89 | `); 90 | }); 91 | }); 92 | 93 | test('variants are supported', () => { 94 | return generatePluginCss({ 95 | flexGrow: { 96 | '2': '2', 97 | }, 98 | variants: ['hover', 'active'], 99 | }).then(css => { 100 | expect(css).toMatchCss(` 101 | .flex-grow-2 { 102 | flex-grow: 2; 103 | } 104 | .hover\\:flex-grow-2:hover { 105 | flex-grow: 2; 106 | } 107 | .active\\:flex-grow-2:active { 108 | flex-grow: 2; 109 | } 110 | `); 111 | }); 112 | }); 113 | --------------------------------------------------------------------------------