React App

├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── assets │ ├── bell.svg │ ├── comment.svg │ ├── heart.svg │ ├── main.css │ ├── message.svg │ └── tailwind.css ├── components │ ├── Navbar.js │ ├── dev-card.js │ └── navbar.css ├── index.css └── index.js ├── tailwind.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## I am cloning the UI component of dev.to, to do exercies of my desiging ability using reactjs and tailwind css. 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "recat-ui-component", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "npm run watch:css && react-scripts start", 15 | "build": "npm run build:css && react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject", 18 | "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css", 19 | "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | }, 36 | "devDependencies": { 37 | "autoprefixer": "^9.8.6", 38 | "postcss-cli": "^7.1.1", 39 | "tailwindcss": "^1.6.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const tailwindcss = require('tailwindcss'); 2 | module.exports = { 3 | plugins: [ 4 | tailwindcss('./tailwind.js'), 5 | require('autoprefixer') 6 | ], 7 | }; -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Meenachinmay/dev.to-card-ui-react-tailwindcss/c1525e2a27b752cf1312e739ab52589d5b15d8b5/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Meenachinmay/dev.to-card-ui-react-tailwindcss/c1525e2a27b752cf1312e739ab52589d5b15d8b5/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Meenachinmay/dev.to-card-ui-react-tailwindcss/c1525e2a27b752cf1312e739ab52589d5b15d8b5/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import DevCard from './components/dev-card'; 3 | import Navbar from './components/Navbar'; 4 | 5 | function App() { 6 | return ( 7 |

8 | 9 | 10 | {/* 11 | 12 | */} 13 |

14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/assets/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 47 | -------------------------------------------------------------------------------- /src/assets/comment.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 48 | -------------------------------------------------------------------------------- /src/assets/message.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Bell from '../assets/bell.svg'; 3 | import Message from '../assets/message.svg'; 4 | import navbar from './navbar.css'; 5 | 6 | const Navbar = () => { 7 | 8 | return ( 9 |

10 |

11 |

12 |

13 | 14 |

15 | 16 |

17 |

18 | 19 |

20 |

21 |

22 |

23 | 26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

37 |

38 |

39 |

40 |

41 | ); 42 | } 43 | 44 | export default Navbar; -------------------------------------------------------------------------------- /src/components/dev-card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Heart from '../assets/heart.svg'; 3 | import Comment from '../assets/comment.svg'; 4 | 5 | const DevCard = ({title, reactions_count}) => { 6 | return ( 7 |

8 |

9 |

10 |

11 |

12 |

13 |

Meena Chinmay

14 |

Aug15 (20 hours ago)

15 |

16 |

17 |

18 |

19 | {title} 20 |

21 |

27 |

28 |

29 |

30 | 31 | {reactions_count} reactions 32 |

33 |

34 | 35 | Add comment 36 |

37 |

38 |

39 | 40 | 1 min read 41 | 42 | 45 |

46 | 47 |

48 |

49 |

50 | ) 51 | } 52 | 53 | export default DevCard; -------------------------------------------------------------------------------- /src/components/navbar.css: -------------------------------------------------------------------------------- 1 | #post__button { 2 | background-color: rgb(59, 73, 223); 3 | } 4 | 5 | #post__button:hover { 6 | background-color: rgb(24, 39, 206); 7 | } 8 | 9 | #logo { 10 | width: 40px; 11 | height: 50px; 12 | } 13 | 14 | #search__input { 15 | padding: 7px 8px; 16 | width: 440px; 17 | } 18 | 19 | #search__input:focus { 20 | border-bottom-color:rgb(109, 121, 212); 21 | border-bottom-style:solid; 22 | border-bottom-width:1px; 23 | border-image-outset:0; 24 | border-image-repeat:stretch; 25 | border-image-slice:100%; 26 | border-image-source:none; 27 | border-image-width:1; 28 | border-left-color:rgb(109, 121, 212); 29 | border-left-style:solid; 30 | border-left-width:1px; 31 | border-right-color:rgb(109, 121, 212); 32 | border-right-style:solid; 33 | border-right-width:1px; 34 | border-top-color:rgb(109, 121, 212); 35 | border-top-style:solid; 36 | border-top-width:1px; 37 | box-sizing:border-box; 38 | -webkit-border-image:none; 39 | box-shadow: 1px 1px rgb(109, 121, 212); 40 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | import './assets/main.css' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); -------------------------------------------------------------------------------- /tailwind.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | target: 'relaxed', 4 | prefix: '', 5 | important: false, 6 | separator: ':', 7 | theme: { 8 | screens: { 9 | sm: '640px', 10 | md: '768px', 11 | lg: '1024px', 12 | xl: '1280px', 13 | }, 14 | colors: { 15 | transparent: 'transparent', 16 | current: 'currentColor', 17 | 18 | black: '#000', 19 | white: '#fff', 20 | 21 | gray: { 22 | 100: '#f7fafc', 23 | 200: '#edf2f7', 24 | 300: '#e2e8f0', 25 | 400: '#cbd5e0', 26 | 500: '#a0aec0', 27 | 600: '#718096', 28 | 700: '#4a5568', 29 | 800: '#2d3748', 30 | 900: '#1a202c', 31 | }, 32 | red: { 33 | 100: '#fff5f5', 34 | 200: '#fed7d7', 35 | 300: '#feb2b2', 36 | 400: '#fc8181', 37 | 500: '#f56565', 38 | 600: '#e53e3e', 39 | 700: '#c53030', 40 | 800: '#9b2c2c', 41 | 900: '#742a2a', 42 | }, 43 | orange: { 44 | 100: '#fffaf0', 45 | 200: '#feebc8', 46 | 300: '#fbd38d', 47 | 400: '#f6ad55', 48 | 500: '#ed8936', 49 | 600: '#dd6b20', 50 | 700: '#c05621', 51 | 800: '#9c4221', 52 | 900: '#7b341e', 53 | }, 54 | yellow: { 55 | 100: '#fffff0', 56 | 200: '#fefcbf', 57 | 300: '#faf089', 58 | 400: '#f6e05e', 59 | 500: '#ecc94b', 60 | 600: '#d69e2e', 61 | 700: '#b7791f', 62 | 800: '#975a16', 63 | 900: '#744210', 64 | }, 65 | green: { 66 | 100: '#f0fff4', 67 | 200: '#c6f6d5', 68 | 300: '#9ae6b4', 69 | 400: '#68d391', 70 | 500: '#48bb78', 71 | 600: '#38a169', 72 | 700: '#2f855a', 73 | 800: '#276749', 74 | 900: '#22543d', 75 | }, 76 | teal: { 77 | 100: '#e6fffa', 78 | 200: '#b2f5ea', 79 | 300: '#81e6d9', 80 | 400: '#4fd1c5', 81 | 500: '#38b2ac', 82 | 600: '#319795', 83 | 700: '#2c7a7b', 84 | 800: '#285e61', 85 | 900: '#234e52', 86 | }, 87 | blue: { 88 | 100: '#ebf8ff', 89 | 200: '#bee3f8', 90 | 300: '#90cdf4', 91 | 400: '#63b3ed', 92 | 500: '#4299e1', 93 | 600: '#3182ce', 94 | 700: '#2b6cb0', 95 | 800: '#2c5282', 96 | 900: '#2a4365', 97 | }, 98 | indigo: { 99 | 100: '#ebf4ff', 100 | 200: '#c3dafe', 101 | 300: '#a3bffa', 102 | 400: '#7f9cf5', 103 | 500: '#667eea', 104 | 600: '#5a67d8', 105 | 700: '#4c51bf', 106 | 800: '#434190', 107 | 900: '#3c366b', 108 | }, 109 | purple: { 110 | 100: '#faf5ff', 111 | 200: '#e9d8fd', 112 | 300: '#d6bcfa', 113 | 400: '#b794f4', 114 | 500: '#9f7aea', 115 | 600: '#805ad5', 116 | 700: '#6b46c1', 117 | 800: '#553c9a', 118 | 900: '#44337a', 119 | }, 120 | pink: { 121 | 100: '#fff5f7', 122 | 200: '#fed7e2', 123 | 300: '#fbb6ce', 124 | 400: '#f687b3', 125 | 500: '#ed64a6', 126 | 600: '#d53f8c', 127 | 700: '#b83280', 128 | 800: '#97266d', 129 | 900: '#702459', 130 | }, 131 | }, 132 | spacing: { 133 | px: '1px', 134 | '0': '0', 135 | '1': '0.25rem', 136 | '2': '0.5rem', 137 | '3': '0.75rem', 138 | '4': '1rem', 139 | '5': '1.25rem', 140 | '6': '1.5rem', 141 | '8': '2rem', 142 | '10': '2.5rem', 143 | '12': '3rem', 144 | '16': '4rem', 145 | '20': '5rem', 146 | '24': '6rem', 147 | '32': '8rem', 148 | '40': '10rem', 149 | '48': '12rem', 150 | '56': '14rem', 151 | '64': '16rem', 152 | }, 153 | backgroundColor: theme => theme('colors'), 154 | backgroundOpacity: theme => theme('opacity'), 155 | backgroundPosition: { 156 | bottom: 'bottom', 157 | center: 'center', 158 | left: 'left', 159 | 'left-bottom': 'left bottom', 160 | 'left-top': 'left top', 161 | right: 'right', 162 | 'right-bottom': 'right bottom', 163 | 'right-top': 'right top', 164 | top: 'top', 165 | }, 166 | backgroundSize: { 167 | auto: 'auto', 168 | cover: 'cover', 169 | contain: 'contain', 170 | }, 171 | borderColor: theme => ({ 172 | ...theme('colors'), 173 | default: theme('colors.gray.300', 'currentColor'), 174 | }), 175 | borderOpacity: theme => theme('opacity'), 176 | borderRadius: { 177 | none: '0', 178 | sm: '0.125rem', 179 | default: '0.25rem', 180 | md: '0.375rem', 181 | lg: '0.5rem', 182 | full: '9999px', 183 | }, 184 | borderWidth: { 185 | default: '1px', 186 | '0': '0', 187 | '2': '2px', 188 | '4': '4px', 189 | '8': '8px', 190 | }, 191 | boxShadow: { 192 | xs: '0 0 0 1px rgba(0, 0, 0, 0.05)', 193 | sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', 194 | default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 195 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 196 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', 197 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', 198 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', 199 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', 200 | outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', 201 | none: 'none', 202 | }, 203 | container: {}, 204 | cursor: { 205 | auto: 'auto', 206 | default: 'default', 207 | pointer: 'pointer', 208 | wait: 'wait', 209 | text: 'text', 210 | move: 'move', 211 | 'not-allowed': 'not-allowed', 212 | }, 213 | divideColor: theme => theme('borderColor'), 214 | divideOpacity: theme => theme('borderOpacity'), 215 | divideWidth: theme => theme('borderWidth'), 216 | fill: { 217 | current: 'currentColor', 218 | }, 219 | flex: { 220 | '1': '1 1 0%', 221 | auto: '1 1 auto', 222 | initial: '0 1 auto', 223 | none: 'none', 224 | }, 225 | flexGrow: { 226 | '0': '0', 227 | default: '1', 228 | }, 229 | flexShrink: { 230 | '0': '0', 231 | default: '1', 232 | }, 233 | fontFamily: { 234 | sans: [ 235 | 'system-ui', 236 | '-apple-system', 237 | 'BlinkMacSystemFont', 238 | '"Segoe UI"', 239 | 'Roboto', 240 | '"Helvetica Neue"', 241 | 'Arial', 242 | '"Noto Sans"', 243 | 'sans-serif', 244 | '"Apple Color Emoji"', 245 | '"Segoe UI Emoji"', 246 | '"Segoe UI Symbol"', 247 | '"Noto Color Emoji"', 248 | ], 249 | serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], 250 | mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'], 251 | }, 252 | fontSize: { 253 | xs: '0.75rem', 254 | sm: '0.875rem', 255 | base: '1rem', 256 | lg: '1.125rem', 257 | xl: '1.25rem', 258 | '2xl': '1.5rem', 259 | '3xl': '1.875rem', 260 | '4xl': '2.25rem', 261 | '5xl': '3rem', 262 | '6xl': '4rem', 263 | }, 264 | fontWeight: { 265 | hairline: '100', 266 | thin: '200', 267 | light: '300', 268 | normal: '400', 269 | medium: '500', 270 | semibold: '600', 271 | bold: '700', 272 | extrabold: '800', 273 | black: '900', 274 | }, 275 | height: theme => ({ 276 | auto: 'auto', 277 | ...theme('spacing'), 278 | full: '100%', 279 | screen: '100vh', 280 | }), 281 | inset: { 282 | '0': '0', 283 | auto: 'auto', 284 | }, 285 | letterSpacing: { 286 | tighter: '-0.05em', 287 | tight: '-0.025em', 288 | normal: '0', 289 | wide: '0.025em', 290 | wider: '0.05em', 291 | widest: '0.1em', 292 | }, 293 | lineHeight: { 294 | none: '1', 295 | tight: '1.25', 296 | snug: '1.375', 297 | normal: '1.5', 298 | relaxed: '1.625', 299 | loose: '2', 300 | '3': '.75rem', 301 | '4': '1rem', 302 | '5': '1.25rem', 303 | '6': '1.5rem', 304 | '7': '1.75rem', 305 | '8': '2rem', 306 | '9': '2.25rem', 307 | '10': '2.5rem', 308 | }, 309 | listStyleType: { 310 | none: 'none', 311 | disc: 'disc', 312 | decimal: 'decimal', 313 | }, 314 | margin: (theme, { negative }) => ({ 315 | auto: 'auto', 316 | ...theme('spacing'), 317 | ...negative(theme('spacing')), 318 | }), 319 | maxHeight: { 320 | full: '100%', 321 | screen: '100vh', 322 | }, 323 | maxWidth: (theme, { breakpoints }) => ({ 324 | none: 'none', 325 | xs: '20rem', 326 | sm: '24rem', 327 | md: '28rem', 328 | lg: '32rem', 329 | xl: '36rem', 330 | '2xl': '42rem', 331 | '3xl': '48rem', 332 | '4xl': '56rem', 333 | '5xl': '64rem', 334 | '6xl': '72rem', 335 | full: '100%', 336 | ...breakpoints(theme('screens')), 337 | }), 338 | minHeight: { 339 | '0': '0', 340 | full: '100%', 341 | screen: '100vh', 342 | }, 343 | minWidth: { 344 | '0': '0', 345 | full: '100%', 346 | }, 347 | objectPosition: { 348 | bottom: 'bottom', 349 | center: 'center', 350 | left: 'left', 351 | 'left-bottom': 'left bottom', 352 | 'left-top': 'left top', 353 | right: 'right', 354 | 'right-bottom': 'right bottom', 355 | 'right-top': 'right top', 356 | top: 'top', 357 | }, 358 | opacity: { 359 | '0': '0', 360 | '25': '0.25', 361 | '50': '0.5', 362 | '75': '0.75', 363 | '100': '1', 364 | }, 365 | order: { 366 | first: '-9999', 367 | last: '9999', 368 | none: '0', 369 | '1': '1', 370 | '2': '2', 371 | '3': '3', 372 | '4': '4', 373 | '5': '5', 374 | '6': '6', 375 | '7': '7', 376 | '8': '8', 377 | '9': '9', 378 | '10': '10', 379 | '11': '11', 380 | '12': '12', 381 | }, 382 | padding: theme => theme('spacing'), 383 | placeholderColor: theme => theme('colors'), 384 | placeholderOpacity: theme => theme('opacity'), 385 | space: (theme, { negative }) => ({ 386 | ...theme('spacing'), 387 | ...negative(theme('spacing')), 388 | }), 389 | stroke: { 390 | current: 'currentColor', 391 | }, 392 | strokeWidth: { 393 | '0': '0', 394 | '1': '1', 395 | '2': '2', 396 | }, 397 | textColor: theme => theme('colors'), 398 | textOpacity: theme => theme('opacity'), 399 | width: theme => ({ 400 | auto: 'auto', 401 | ...theme('spacing'), 402 | '1/2': '50%', 403 | '1/3': '33.333333%', 404 | '2/3': '66.666667%', 405 | '1/4': '25%', 406 | '2/4': '50%', 407 | '3/4': '75%', 408 | '1/5': '20%', 409 | '2/5': '40%', 410 | '3/5': '60%', 411 | '4/5': '80%', 412 | '1/6': '16.666667%', 413 | '2/6': '33.333333%', 414 | '3/6': '50%', 415 | '4/6': '66.666667%', 416 | '5/6': '83.333333%', 417 | '1/12': '8.333333%', 418 | '2/12': '16.666667%', 419 | '3/12': '25%', 420 | '4/12': '33.333333%', 421 | '5/12': '41.666667%', 422 | '6/12': '50%', 423 | '7/12': '58.333333%', 424 | '8/12': '66.666667%', 425 | '9/12': '75%', 426 | '10/12': '83.333333%', 427 | '11/12': '91.666667%', 428 | full: '100%', 429 | screen: '100vw', 430 | }), 431 | zIndex: { 432 | auto: 'auto', 433 | '0': '0', 434 | '10': '10', 435 | '20': '20', 436 | '30': '30', 437 | '40': '40', 438 | '50': '50', 439 | }, 440 | gap: theme => theme('spacing'), 441 | gridTemplateColumns: { 442 | none: 'none', 443 | '1': 'repeat(1, minmax(0, 1fr))', 444 | '2': 'repeat(2, minmax(0, 1fr))', 445 | '3': 'repeat(3, minmax(0, 1fr))', 446 | '4': 'repeat(4, minmax(0, 1fr))', 447 | '5': 'repeat(5, minmax(0, 1fr))', 448 | '6': 'repeat(6, minmax(0, 1fr))', 449 | '7': 'repeat(7, minmax(0, 1fr))', 450 | '8': 'repeat(8, minmax(0, 1fr))', 451 | '9': 'repeat(9, minmax(0, 1fr))', 452 | '10': 'repeat(10, minmax(0, 1fr))', 453 | '11': 'repeat(11, minmax(0, 1fr))', 454 | '12': 'repeat(12, minmax(0, 1fr))', 455 | }, 456 | gridColumn: { 457 | auto: 'auto', 458 | 'span-1': 'span 1 / span 1', 459 | 'span-2': 'span 2 / span 2', 460 | 'span-3': 'span 3 / span 3', 461 | 'span-4': 'span 4 / span 4', 462 | 'span-5': 'span 5 / span 5', 463 | 'span-6': 'span 6 / span 6', 464 | 'span-7': 'span 7 / span 7', 465 | 'span-8': 'span 8 / span 8', 466 | 'span-9': 'span 9 / span 9', 467 | 'span-10': 'span 10 / span 10', 468 | 'span-11': 'span 11 / span 11', 469 | 'span-12': 'span 12 / span 12', 470 | }, 471 | gridColumnStart: { 472 | auto: 'auto', 473 | '1': '1', 474 | '2': '2', 475 | '3': '3', 476 | '4': '4', 477 | '5': '5', 478 | '6': '6', 479 | '7': '7', 480 | '8': '8', 481 | '9': '9', 482 | '10': '10', 483 | '11': '11', 484 | '12': '12', 485 | '13': '13', 486 | }, 487 | gridColumnEnd: { 488 | auto: 'auto', 489 | '1': '1', 490 | '2': '2', 491 | '3': '3', 492 | '4': '4', 493 | '5': '5', 494 | '6': '6', 495 | '7': '7', 496 | '8': '8', 497 | '9': '9', 498 | '10': '10', 499 | '11': '11', 500 | '12': '12', 501 | '13': '13', 502 | }, 503 | gridTemplateRows: { 504 | none: 'none', 505 | '1': 'repeat(1, minmax(0, 1fr))', 506 | '2': 'repeat(2, minmax(0, 1fr))', 507 | '3': 'repeat(3, minmax(0, 1fr))', 508 | '4': 'repeat(4, minmax(0, 1fr))', 509 | '5': 'repeat(5, minmax(0, 1fr))', 510 | '6': 'repeat(6, minmax(0, 1fr))', 511 | }, 512 | gridRow: { 513 | auto: 'auto', 514 | 'span-1': 'span 1 / span 1', 515 | 'span-2': 'span 2 / span 2', 516 | 'span-3': 'span 3 / span 3', 517 | 'span-4': 'span 4 / span 4', 518 | 'span-5': 'span 5 / span 5', 519 | 'span-6': 'span 6 / span 6', 520 | }, 521 | gridRowStart: { 522 | auto: 'auto', 523 | '1': '1', 524 | '2': '2', 525 | '3': '3', 526 | '4': '4', 527 | '5': '5', 528 | '6': '6', 529 | '7': '7', 530 | }, 531 | gridRowEnd: { 532 | auto: 'auto', 533 | '1': '1', 534 | '2': '2', 535 | '3': '3', 536 | '4': '4', 537 | '5': '5', 538 | '6': '6', 539 | '7': '7', 540 | }, 541 | transformOrigin: { 542 | center: 'center', 543 | top: 'top', 544 | 'top-right': 'top right', 545 | right: 'right', 546 | 'bottom-right': 'bottom right', 547 | bottom: 'bottom', 548 | 'bottom-left': 'bottom left', 549 | left: 'left', 550 | 'top-left': 'top left', 551 | }, 552 | scale: { 553 | '0': '0', 554 | '50': '.5', 555 | '75': '.75', 556 | '90': '.9', 557 | '95': '.95', 558 | '100': '1', 559 | '105': '1.05', 560 | '110': '1.1', 561 | '125': '1.25', 562 | '150': '1.5', 563 | }, 564 | rotate: { 565 | '-180': '-180deg', 566 | '-90': '-90deg', 567 | '-45': '-45deg', 568 | '0': '0', 569 | '45': '45deg', 570 | '90': '90deg', 571 | '180': '180deg', 572 | }, 573 | translate: (theme, { negative }) => ({ 574 | ...theme('spacing'), 575 | ...negative(theme('spacing')), 576 | '-full': '-100%', 577 | '-1/2': '-50%', 578 | '1/2': '50%', 579 | full: '100%', 580 | }), 581 | skew: { 582 | '-12': '-12deg', 583 | '-6': '-6deg', 584 | '-3': '-3deg', 585 | '0': '0', 586 | '3': '3deg', 587 | '6': '6deg', 588 | '12': '12deg', 589 | }, 590 | transitionProperty: { 591 | none: 'none', 592 | all: 'all', 593 | default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', 594 | colors: 'background-color, border-color, color, fill, stroke', 595 | opacity: 'opacity', 596 | shadow: 'box-shadow', 597 | transform: 'transform', 598 | }, 599 | transitionTimingFunction: { 600 | linear: 'linear', 601 | in: 'cubic-bezier(0.4, 0, 1, 1)', 602 | out: 'cubic-bezier(0, 0, 0.2, 1)', 603 | 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', 604 | }, 605 | transitionDuration: { 606 | '75': '75ms', 607 | '100': '100ms', 608 | '150': '150ms', 609 | '200': '200ms', 610 | '300': '300ms', 611 | '500': '500ms', 612 | '700': '700ms', 613 | '1000': '1000ms', 614 | }, 615 | transitionDelay: { 616 | '75': '75ms', 617 | '100': '100ms', 618 | '150': '150ms', 619 | '200': '200ms', 620 | '300': '300ms', 621 | '500': '500ms', 622 | '700': '700ms', 623 | '1000': '1000ms', 624 | }, 625 | animation: { 626 | none: 'none', 627 | spin: 'spin 1s linear infinite', 628 | ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', 629 | pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 630 | bounce: 'bounce 1s infinite', 631 | }, 632 | keyframes: { 633 | spin: { 634 | from: { transform: 'rotate(0deg)' }, 635 | to: { transform: 'rotate(360deg)' }, 636 | }, 637 | ping: { 638 | '0%': { transform: 'scale(1)', opacity: '1' }, 639 | '75%, 100%': { transform: 'scale(2)', opacity: '0' }, 640 | }, 641 | pulse: { 642 | '0%, 100%': { opacity: '1' }, 643 | '50%': { opacity: '.5' }, 644 | }, 645 | bounce: { 646 | '0%, 100%': { 647 | transform: 'translateY(-25%)', 648 | animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', 649 | }, 650 | '50%': { 651 | transform: 'translateY(0)', 652 | animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', 653 | }, 654 | }, 655 | }, 656 | }, 657 | variants: { 658 | accessibility: ['responsive', 'focus'], 659 | alignContent: ['responsive'], 660 | alignItems: ['responsive'], 661 | alignSelf: ['responsive'], 662 | appearance: ['responsive'], 663 | backgroundAttachment: ['responsive'], 664 | backgroundColor: ['responsive', 'hover', 'focus'], 665 | backgroundOpacity: ['responsive', 'hover', 'focus'], 666 | backgroundPosition: ['responsive'], 667 | backgroundRepeat: ['responsive'], 668 | backgroundSize: ['responsive'], 669 | borderCollapse: ['responsive'], 670 | borderColor: ['responsive', 'hover', 'focus'], 671 | borderOpacity: ['responsive', 'hover', 'focus'], 672 | borderRadius: ['responsive'], 673 | borderStyle: ['responsive'], 674 | borderWidth: ['responsive'], 675 | boxShadow: ['responsive', 'hover', 'focus'], 676 | boxSizing: ['responsive'], 677 | container: ['responsive'], 678 | cursor: ['responsive'], 679 | display: ['responsive'], 680 | divideColor: ['responsive'], 681 | divideOpacity: ['responsive'], 682 | divideWidth: ['responsive'], 683 | fill: ['responsive'], 684 | flex: ['responsive'], 685 | flexDirection: ['responsive'], 686 | flexGrow: ['responsive'], 687 | flexShrink: ['responsive'], 688 | flexWrap: ['responsive'], 689 | float: ['responsive'], 690 | clear: ['responsive'], 691 | fontFamily: ['responsive'], 692 | fontSize: ['responsive'], 693 | fontSmoothing: ['responsive'], 694 | fontStyle: ['responsive'], 695 | fontWeight: ['responsive', 'hover', 'focus'], 696 | height: ['responsive'], 697 | inset: ['responsive'], 698 | justifyContent: ['responsive'], 699 | letterSpacing: ['responsive'], 700 | lineHeight: ['responsive'], 701 | listStylePosition: ['responsive'], 702 | listStyleType: ['responsive'], 703 | margin: ['responsive'], 704 | maxHeight: ['responsive'], 705 | maxWidth: ['responsive'], 706 | minHeight: ['responsive'], 707 | minWidth: ['responsive'], 708 | objectFit: ['responsive'], 709 | objectPosition: ['responsive'], 710 | opacity: ['responsive', 'hover', 'focus'], 711 | order: ['responsive'], 712 | outline: ['responsive', 'focus'], 713 | overflow: ['responsive'], 714 | overscrollBehavior: ['responsive'], 715 | padding: ['responsive'], 716 | placeholderColor: ['responsive', 'focus'], 717 | placeholderOpacity: ['responsive', 'focus'], 718 | pointerEvents: ['responsive'], 719 | position: ['responsive'], 720 | resize: ['responsive'], 721 | space: ['responsive'], 722 | stroke: ['responsive'], 723 | strokeWidth: ['responsive'], 724 | tableLayout: ['responsive'], 725 | textAlign: ['responsive'], 726 | textColor: ['responsive', 'hover', 'focus'], 727 | textOpacity: ['responsive', 'hover', 'focus'], 728 | textDecoration: ['responsive', 'hover', 'focus'], 729 | textTransform: ['responsive'], 730 | userSelect: ['responsive'], 731 | verticalAlign: ['responsive'], 732 | visibility: ['responsive'], 733 | whitespace: ['responsive'], 734 | width: ['responsive'], 735 | wordBreak: ['responsive'], 736 | zIndex: ['responsive'], 737 | gap: ['responsive'], 738 | gridAutoFlow: ['responsive'], 739 | gridTemplateColumns: ['responsive'], 740 | gridColumn: ['responsive'], 741 | gridColumnStart: ['responsive'], 742 | gridColumnEnd: ['responsive'], 743 | gridTemplateRows: ['responsive'], 744 | gridRow: ['responsive'], 745 | gridRowStart: ['responsive'], 746 | gridRowEnd: ['responsive'], 747 | transform: ['responsive'], 748 | transformOrigin: ['responsive'], 749 | scale: ['responsive', 'hover', 'focus'], 750 | rotate: ['responsive', 'hover', 'focus'], 751 | translate: ['responsive', 'hover', 'focus'], 752 | skew: ['responsive', 'hover', 'focus'], 753 | transitionProperty: ['responsive'], 754 | transitionTimingFunction: ['responsive'], 755 | transitionDuration: ['responsive'], 756 | transitionDelay: ['responsive'], 757 | animation: ['responsive'], 758 | }, 759 | corePlugins: {}, 760 | plugins: [], 761 | } 762 | --------------------------------------------------------------------------------