├── .gitignore
├── .prettierrc
├── favicon.ico
├── src
    ├── state
    │   └── index.js
    ├── components
    │   ├── index.js
    │   ├── MobileFallback.js
    │   ├── Search.js
    │   ├── Emoji.js
    │   └── Menu.js
    ├── actions
    │   └── index.js
    ├── modules
    │   ├── index.js
    │   ├── storage.js
    │   ├── device.js
    │   ├── clipboard.js
    │   ├── keyboard.js
    │   └── serviceWorker.js
    ├── index.js
    └── style.css
├── netlify.toml
├── .babelrc
├── README.md
├── postcss.config.js
├── package.json
├── index.html
├── LICENSE
└── tailwind.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .cache
2 | dist
3 | node_modules


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gary149/rocket-emoji/HEAD/favicon.ico


--------------------------------------------------------------------------------
/src/state/index.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   search: '',
3 |   searchInputPos: { x: null, y: null },
4 |   menu: true
5 | }
6 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist/"
3 |   command = "npm run build"
4 | 
5 | [[redirects]]
6 |   from = "/*"
7 |   to = "/index.html"
8 |   status = 200


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["@babel/preset-env"],
 3 |   "plugins": [
 4 |     [
 5 |       "@babel/plugin-transform-react-jsx",
 6 |       { "pragma": "h"  }
 7 |     ],
 8 |     "@babel/plugin-transform-runtime"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import Menu from './Menu'
 2 | import Emoji from './Emoji'
 3 | import Search from './Search'
 4 | import MobileFallback from './MobileFallback'
 5 | 
 6 | export {
 7 |   Menu,
 8 |   Emoji,
 9 |   Search,
10 |   MobileFallback
11 | }
12 | 


--------------------------------------------------------------------------------
/src/actions/index.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   search: text => state => ({
 3 |     search: text
 4 |   }),
 5 | 
 6 |   setInputSearchPos: ({ x, y }) => state => ({
 7 |     searchInputPos: {x, y}
 8 |   }),
 9 | 
10 |   toggleMenu: () => state => ({
11 |     menu: !state.menu
12 |   })
13 | }
14 | 


--------------------------------------------------------------------------------
/src/modules/index.js:
--------------------------------------------------------------------------------
 1 | import device from './device'
 2 | import storage from './storage'
 3 | import keyboard from './keyboard'
 4 | import clipboard from './clipboard'
 5 | import serviceWorker from './serviceWorker'
 6 | 
 7 | export {
 8 |   device,
 9 |   storage,
10 |   keyboard,
11 |   clipboard,
12 |   serviceWorker
13 | }
14 | 


--------------------------------------------------------------------------------
/src/modules/storage.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   saveMenuState(active) {
 3 |     localStorage.setItem('menu', JSON.stringify(active))
 4 |   },
 5 | 
 6 |   getMenuState(defaultState = true) {
 7 |     return localStorage.getItem('menu')
 8 |       ? JSON.parse(localStorage.getItem('menu'))
 9 |       : defaultState
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/modules/device.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   isMobile() {
 3 |     const userAgent = navigator.userAgent
 4 |     return (
 5 |       userAgent.match(/Android/i) ||
 6 |       userAgent.match(/webOS/i) ||
 7 |       userAgent.match(/iPhone/i) ||
 8 |       userAgent.match(/iPad/i) ||
 9 |       userAgent.match(/iPod/i) ||
10 |       userAgent.match(/BlackBerry/i) ||
11 |       userAgent.match(/Windows Phone/i)
12 |     )
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/modules/clipboard.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   copy(text) {
 3 |     const element = document.createElement('textarea')
 4 |     element.value = text
 5 |     element.style.position = 'fixed'
 6 |     document.body.appendChild(element)
 7 |     element.focus({ preventScroll: true })
 8 |     element.setSelectionRange(0, element.value.length)
 9 |     document.execCommand('copy')
10 |     document.body.removeChild(element)
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/modules/keyboard.js:
--------------------------------------------------------------------------------
 1 | const keys = {
 2 |   alphabet: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
 3 | }
 4 | 
 5 | export default {
 6 |   bindEvents(state, actions) {
 7 |     document.addEventListener('keypress', event => {
 8 |       if (keys.alphabet.includes(event.key)) {
 9 |         if (state.search.length > 0) return
10 |         actions.search(event.key)
11 |       }
12 |     })
13 | 
14 |     document.addEventListener('keydown', event => {
15 |       if (event.key === 'Escape') {
16 |         actions.search('')
17 |       }
18 |     })
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/MobileFallback.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'hyperapp'
 2 | 
 3 | export default () => (
 4 |   <div class="container mx-auto p-8">
 5 |     <p class="mb-3 px-2 font-bold">
 6 |       🚀 Rocket Emoji is a desktop website. Please connect from your desktop to
 7 |       use it.
 8 |     </p>
 9 |     <p class="mb-4 px-2">
10 |       It is the fastest way to find and copy an emoji to your clipboard!
11 |     </p>
12 |     <video autoplay playsinline muted class="w-full">
13 |       <source
14 |         src="https://res.cloudinary.com/picturesbase/video/upload/v1549280289/rocketemoji_drivfk.mp4"
15 |         type="video/mp4"
16 |       />
17 |     </video>
18 |   </div>
19 | )
20 | 


--------------------------------------------------------------------------------
/src/modules/serviceWorker.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   register() {
 3 |     if (process.env.NODE_ENV !== 'production') return
 4 |     if ('serviceWorker' in navigator) {
 5 |       window.addEventListener('load', () => {
 6 |         const swPath = `service-worker.js`
 7 |         navigator.serviceWorker.register(swPath).then(
 8 |           registration => {
 9 |             console.log(
10 |               'ServiceWorker registration successful with scope: ',
11 |               registration.scope
12 |             )
13 |           },
14 |           err => {
15 |             console.log('ServiceWorker registration failed: ', err)
16 |           }
17 |         )
18 |       })
19 |     }
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Features display](https://res.cloudinary.com/picturesbase/video/upload/c_crop,g_north,h_913,w_1790/v1549280289/rocketemoji_drivfk.gif)
 2 | 
 3 | ## Usage
 4 | 
 5 | 1. `npm install`
 6 | 2. `npm run dev`
 7 | 
 8 | ## Dependencies
 9 | 
10 | - [Hyperapp](https://github.com/hyperapp/hyperapp) - Minimal (1kb), Functional + Stateless components
11 | - [Tailwind](https://tailwindcss.com/docs/what-is-tailwind/) - A utility-first CSS framework for rapidly building custom user interfaces. - [Article](https://www.mikecr.it/ramblings/functional-css/)
12 | - [PurgeCSS](https://github.com/FullHuman/purgecss) - Remove unused css (useful with tailwindcss)
13 | - [Picostyle](https://github.com/morishitter/picostyle) - Ultra small CSS in JS library in 0.4 KB
14 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const tailwindcss = require('tailwindcss')
 2 | const purgecss = require('@fullhuman/postcss-purgecss')
 3 | 
 4 | // This will extract variants
 5 | class TailwindExtractor {
 6 |   static extract(content) {
 7 |     return content.match(/[A-Za-z0-9-_:\/]+/g) || []
 8 |   }
 9 | }
10 | 
11 | module.exports = {
12 |   plugins: [
13 |     tailwindcss('./tailwind.js'),
14 |     ...(process.env.NODE_ENV === 'production'
15 |       ? [
16 |           purgecss({
17 |             content: ['./index.html', './src/*.js', './src/components/*.js'],
18 |             extractors: [
19 |               {
20 |                 extractor: TailwindExtractor,
21 |                 extensions: ['js', 'html']
22 |               }
23 |             ]
24 |           })
25 |         ]
26 |       : []),
27 |     require('autoprefixer')
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rocket-emoji",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "serve ./dist --single",
 8 |     "dev": "parcel index.html",
 9 |     "build": "parcel build index.html --public-url ./"
10 |   },
11 |   "author": "Victor Mustar <victor@jubiwee.com> (www.jubiwee.com)",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "hyperapp": "^1.2.9",
15 |     "picostyle": "^2.1.1",
16 |     "serve": "^10.1.2"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/core": "^7.2.2",
20 |     "@babel/plugin-transform-react-jsx": "^7.3.0",
21 |     "@babel/plugin-transform-runtime": "^7.2.0",
22 |     "@babel/preset-env": "^7.3.1",
23 |     "@fullhuman/postcss-purgecss": "^1.1.0",
24 |     "@hyperapp/logger": "^0.4.1",
25 |     "autoprefixer": "^9.4.6",
26 |     "parcel": "^1.11.0",
27 |     "parcel-plugin-sw-precache": "^1.0.3",
28 |     "purgecss": "^1.0.1",
29 |     "tailwindcss": "^0.4.1"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Rocket Emoji - The fastest way to copy and paste emojis</title>
 5 |     <meta
 6 |     name="description"
 7 |     content="Copy an emoji to your clipboard in one click. Type with your keyboard to search the list, click the emoji to copy. Finding emojis has never been easier!"
 8 |     />
 9 |     <meta name="theme-color" content="#ffffff" />
10 |     <meta name="viewport" content="width=device-width" />
11 |     <link rel="icon" href="/favicon.ico" />
12 |     <!-- Global site tag (gtag.js) - Google Analytics -->
13 |     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33078922-3"></script>
14 |     <script>
15 |       window.dataLayer = window.dataLayer || [];
16 |       function gtag(){dataLayer.push(arguments);}
17 |       gtag('js', new Date());
18 | 
19 |       gtag('config', 'UA-33078922-3');
20 |     </script>
21 |   </head>
22 | 
23 |   <body class='font-sans'>
24 |     <noscript>
25 |       <p>😥 Sorry - You need to activate Javascript to use Rocket Emoji!</p>
26 |     </noscript>
27 |     <script src="./src/index.js"></script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2010-2018 Google, Inc. http://angularjs.org
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/src/components/Search.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'hyperapp'
 2 | import picostyle from 'picostyle'
 3 | const style = picostyle(h)
 4 | 
 5 | const resolveDrag = (e, cb) => {
 6 |   const offset = { x: e.offsetX, y: e.offsetY }
 7 |   document.addEventListener('mousemove', function drag(e) {
 8 |     if (e.buttons !== 1) {
 9 |       document.removeEventListener('mousemove', drag)
10 |       return
11 |     }
12 |     cb({ x: e.clientX - offset.x, y: e.clientY - offset.y })
13 |     document.addEventListener('mouseup', function drop() {
14 |       document.removeEventListener('mousemove', drag)
15 |       document.removeEventListener('mouseup', drop)
16 |     })
17 |   })
18 | }
19 | 
20 | const StyledSearch = style('input')(props => ({
21 |   transform: props.x ? '' : 'translate3d(-50%, -50%, 0)',
22 |   left: props.x ? `${props.x}px` : '50%',
23 |   top: props.y ? `${props.y}px` : '50%'
24 | }))
25 | 
26 | export default ({ value, pos, oninput, ondrag }) => (
27 |   <StyledSearch
28 |     type="text"
29 |     value={value}
30 |     x={pos.x}
31 |     y={pos.y}
32 |     oncreate={$el => $el.focus()}
33 |     oninput={e => oninput(e.target.value)}
34 |     onmousedown={e => resolveDrag(e, ondrag)}
35 |     class="fixed bg-black p-4 text-2xl z-10 rounded text-white shadow"
36 |   />
37 | )
38 | 


--------------------------------------------------------------------------------
/src/components/Emoji.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'hyperapp'
 2 | import clipboard from '../modules/clipboard'
 3 | import picostyle, { keyframes } from 'picostyle'
 4 | const style = picostyle(h)
 5 | 
 6 | const StyledEmoji = style('button')(props => ({
 7 |   transition: 'text-shadow .2s ease-in',
 8 |   textShadow: 'rgba(12, 8, 9, 0) 1px 1px -2px',
 9 |   boxShadow: 'rgba(0, 0, 0, 0.2) 0 0 0 0 inset',
10 |   ':hover': {
11 |     boxShadow: 'rgba(0, 0, 0, 0.2) 0px -1px 2px 0px inset',
12 |     textShadow: 'rgba(12, 8, 9, 0.53) 1px 1px 2px'
13 |   },
14 |   '.active': {
15 |     animation: `${keyframes({
16 |       from: { background: '#ffffff' },
17 |       to: { background: '#353535' }
18 |     })} .2s 2 ease-in`
19 |   }
20 | }))
21 | 
22 | const toggleBlinkAnimation = target => {
23 |   target.classList.add('active')
24 |   target.addEventListener('animationend', function removeAnimation() {
25 |     target.classList.remove('active')
26 |     target.removeEventListener('animationend', removeAnimation)
27 |   })
28 | }
29 | 
30 | const handleClick = ({ target }) => {
31 |   clipboard.copy(target.textContent)
32 |   toggleBlinkAnimation(target)
33 | }
34 | 
35 | export default ({ emoji }) => (
36 |   <StyledEmoji
37 |     onclick={handleClick}
38 |     class="w-12 h-12 inline-block text-4xl relative rounded text-center hover:bg-grey-lighter"
39 |   >
40 |     {emoji.symbol}
41 |   </StyledEmoji>
42 | )
43 | 


--------------------------------------------------------------------------------
/src/components/Menu.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'hyperapp'
 2 | import { storage } from '../modules'
 3 | 
 4 | export default ({ active, ontoggle }) => (
 5 |   <div
 6 |     class="absolute pin-r mr-8 mt-2 hidden lg:block"
 7 |     onupdate={_ => storage.saveMenuState(active)}
 8 |   >
 9 |     <div
10 |       onclick={ontoggle}
11 |       class={`h-1 w-3 hover:bg-indigo-light ${
12 |         active ? 'bg-indigo' : 'bg-grey-dark'
13 |       } rounded-full mb-2 ml-auto cursor-pointer select-none`}
14 |     />
15 |     {active && (
16 |       <div class="text-grey-dark text-right text-xs leading-tight">
17 |         <p class="mb-1 text-grey-darkest mt-3">New</p>
18 |         <p class="mb-3">Country flags are now available!</p>
19 |         <p class="mb-1 text-grey-darkest">Help</p>
20 |         <p>Start typing ⌨ to search an emoji</p>
21 |         <p>Click emoji to copy to clipboard</p>
22 |         <p class="mb-3">Press ESC to hide search</p>
23 |         <p class="mb-1 text-grey-darkest">Others</p>
24 |         <a href="https://github.com/gary149/rocket-emoji">
25 |           🐙<span class="underline">Source code</span>
26 |         </a>
27 |         <a href="https://github.com/gary149/rocket-emoji/issues">
28 |           🐞<span class="underline">Bug report</span>
29 |         </a>
30 |         <a href="https://twitter.com/victormustar">
31 |           🐦<span class="underline">Twitter</span>
32 |         </a>
33 |       </div>
34 |     )}
35 |   </div>
36 | )
37 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import './style.css'
 2 | import state from './state'
 3 | import actions from './actions'
 4 | import emojis from './emoji.json'
 5 | import { h, app } from 'hyperapp'
 6 | import { device, keyboard, storage, serviceWorker } from './modules'
 7 | import { Emoji, Search, Menu, MobileFallback } from './components'
 8 | 
 9 | serviceWorker.register()
10 | 
11 | const filteredEmojis = search =>
12 |   search.length
13 |     ? emojis.filter(
14 |         emoji =>
15 |           emoji.keywords.filter(keyword => keyword.includes(search)).length > 0
16 |       )
17 |     : emojis
18 | 
19 | const view = (state, actions) =>
20 |   device.isMobile() ? (
21 |     <MobileFallback />
22 |   ) : (
23 |     <div created={keyboard.bindEvents(state, actions)}>
24 |       {state.search.length > 0 && (
25 |         <Search
26 |           value={state.search}
27 |           pos={state.searchInputPos}
28 |           oninput={actions.search}
29 |           ondrag={actions.setInputSearchPos}
30 |         />
31 |       )}
32 | 
33 |       <Menu ontoggle={actions.toggleMenu} active={state.menu} />
34 | 
35 |       <div class="mx-auto text-center my-8" style={{ maxWidth: '600px' }}>
36 |         {filteredEmojis(state.search).map(emoji => (
37 |           <Emoji key={emoji.symbol} emoji={emoji} />
38 |         ))}
39 |       </div>
40 |     </div>
41 |   )
42 | 
43 | app(
44 |   { ...state, menu: storage.getMenuState(state.menu) },
45 |   actions,
46 |   view,
47 |   document.body
48 | )
49 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This injects Tailwind's base styles, which is a combination of
 3 |  * Normalize.css and some additional base styles.
 4 |  *
 5 |  * You can see the styles here:
 6 |  * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 7 |  *
 8 |  * If using `postcss-import`, you should import this line from it's own file:
 9 |  *
10 |  * @import "./tailwind-preflight.css";
11 |  *
12 |  * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
13 |  */
14 | @tailwind preflight;
15 | 
16 | textarea, select, input, button, button:focus { outline: none; }
17 | 
18 | a {
19 |   @apply block text-grey-dark no-underline;
20 | }
21 | 
22 |  /**
23 |   * Here you would add any of your custom component classes; stuff that you'd
24 |   * want loaded *before* the utilities so that the utilities could still
25 |   * override them.
26 |   *
27 |   * Example:w
28 |   *
29 |   * .btn { ... }
30 |   * .form-input { ... }
31 |   *
32 |   * Or if using a preprocessor or `postcss-import`:
33 |   *
34 |   * @import "components/buttons";
35 |   * @import "components/forms";
36 |   */
37 | 
38 |  /**
39 |   * This injects all of Tailwind's utility classes, generated based on your
40 |   * config file.
41 |   *
42 |   * If using `postcss-import`, you should import this line from it's own file:
43 |   *
44 |   * @import "./tailwind-utilities.css";
45 |   *
46 |   * See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
47 |   */
48 | @tailwind utilities;
49 | 
50 |  /**
51 |   * Here you would add any custom utilities you need that don't come out of the
52 |   * box with Tailwind.
53 |   *
54 |   * Example :
55 |   *
56 |   * .bg-pattern-graph-paper { ... }
57 |   * .skew-45 { ... }
58 |   *
59 |   * Or if using a preprocessor or `postcss-import`:
60 |   *
61 |   * @import "utilities/background-patterns";
62 |   * @import "utilities/skew-transforms";
63 |   */


--------------------------------------------------------------------------------
/tailwind.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Tailwind - The Utility-First CSS Framework
  4 | 
  5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
  6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
  7 | 
  8 | Welcome to the Tailwind config file. This is where you can customize
  9 | Tailwind specifically for your project. Don't be intimidated by the
 10 | length of this file. It's really just a big JavaScript object and
 11 | we've done our very best to explain each section.
 12 | 
 13 | View the full documentation at https://tailwindcss.com.
 14 | 
 15 | 
 16 | |-------------------------------------------------------------------------------
 17 | | The default config
 18 | |-------------------------------------------------------------------------------
 19 | |
 20 | | This variable contains the default Tailwind config. You don't have
 21 | | to use it, but it can sometimes be helpful to have available. For
 22 | | example, you may choose to merge your custom configuration
 23 | | values with some of the Tailwind defaults.
 24 | |
 25 | */
 26 | 
 27 | let defaultConfig = require('tailwindcss/defaultConfig')()
 28 | 
 29 | 
 30 | /*
 31 | |-------------------------------------------------------------------------------
 32 | | Colors                                    https://tailwindcss.com/docs/colors
 33 | |-------------------------------------------------------------------------------
 34 | |
 35 | | Here you can specify the colors used in your project. To get you started,
 36 | | we've provided a generous palette of great looking colors that are perfect
 37 | | for prototyping, but don't hesitate to change them for your project. You
 38 | | own these colors, nothing will break if you change everything about them.
 39 | |
 40 | | We've used literal color names ("red", "blue", etc.) for the default
 41 | | palette, but if you'd rather use functional names like "primary" and
 42 | | "secondary", or even a numeric scale like "100" and "200", go for it.
 43 | |
 44 | */
 45 | 
 46 | let colors = {
 47 |   'transparent': 'transparent',
 48 | 
 49 |   'black': '#22292f',
 50 |   'grey-darkest': '#3d4852',
 51 |   'grey-darker': '#606f7b',
 52 |   'grey-dark': '#8795a1',
 53 |   'grey': '#b8c2cc',
 54 |   'grey-light': '#dae1e7',
 55 |   'grey-lighter': '#f1f5f8',
 56 |   'grey-lightest': '#f8fafc',
 57 |   'white': '#ffffff',
 58 | 
 59 |   'red-darkest': '#3b0d0c',
 60 |   'red-darker': '#621b18',
 61 |   'red-dark': '#cc1f1a',
 62 |   'red': '#e3342f',
 63 |   'red-light': '#ef5753',
 64 |   'red-lighter': '#f9acaa',
 65 |   'red-lightest': '#fcebea',
 66 | 
 67 |   'orange-darkest': '#462a16',
 68 |   'orange-darker': '#613b1f',
 69 |   'orange-dark': '#de751f',
 70 |   'orange': '#f6993f',
 71 |   'orange-light': '#faad63',
 72 |   'orange-lighter': '#fcd9b6',
 73 |   'orange-lightest': '#fff5eb',
 74 | 
 75 |   'yellow-darkest': '#453411',
 76 |   'yellow-darker': '#684f1d',
 77 |   'yellow-dark': '#f2d024',
 78 |   'yellow': '#ffed4a',
 79 |   'yellow-light': '#fff382',
 80 |   'yellow-lighter': '#fff9c2',
 81 |   'yellow-lightest': '#fcfbeb',
 82 | 
 83 |   'green-darkest': '#0f2f21',
 84 |   'green-darker': '#1a4731',
 85 |   'green-dark': '#1f9d55',
 86 |   'green': '#38c172',
 87 |   'green-light': '#51d88a',
 88 |   'green-lighter': '#a2f5bf',
 89 |   'green-lightest': '#e3fcec',
 90 | 
 91 |   'teal-darkest': '#0d3331',
 92 |   'teal-darker': '#20504f',
 93 |   'teal-dark': '#38a89d',
 94 |   'teal': '#4dc0b5',
 95 |   'teal-light': '#64d5ca',
 96 |   'teal-lighter': '#a0f0ed',
 97 |   'teal-lightest': '#e8fffe',
 98 | 
 99 |   'blue-darkest': '#12283a',
100 |   'blue-darker': '#1c3d5a',
101 |   'blue-dark': '#2779bd',
102 |   'blue': '#3490dc',
103 |   'blue-light': '#6cb2eb',
104 |   'blue-lighter': '#bcdefa',
105 |   'blue-lightest': '#eff8ff',
106 | 
107 |   'indigo-darkest': '#191e38',
108 |   'indigo-darker': '#2f365f',
109 |   'indigo-dark': '#5661b3',
110 |   'indigo': '#6574cd',
111 |   'indigo-light': '#7886d7',
112 |   'indigo-lighter': '#b2b7ff',
113 |   'indigo-lightest': '#e6e8ff',
114 | 
115 |   'purple-darkest': '#21183c',
116 |   'purple-darker': '#382b5f',
117 |   'purple-dark': '#794acf',
118 |   'purple': '#9561e2',
119 |   'purple-light': '#a779e9',
120 |   'purple-lighter': '#d6bbfc',
121 |   'purple-lightest': '#f3ebff',
122 | 
123 |   'pink-darkest': '#451225',
124 |   'pink-darker': '#6f213f',
125 |   'pink-dark': '#eb5286',
126 |   'pink': '#f66d9b',
127 |   'pink-light': '#fa7ea8',
128 |   'pink-lighter': '#ffbbca',
129 |   'pink-lightest': '#ffebef',
130 | }
131 | 
132 | module.exports = {
133 | 
134 |   /*
135 |   |-----------------------------------------------------------------------------
136 |   | Colors                                  https://tailwindcss.com/docs/colors
137 |   |-----------------------------------------------------------------------------
138 |   |
139 |   | The color palette defined above is also assigned to the "colors" key of
140 |   | your Tailwind config. This makes it easy to access them in your CSS
141 |   | using Tailwind's config helper. For example:
142 |   |
143 |   | .error { color: config('colors.red') }
144 |   |
145 |   */
146 | 
147 |   colors: colors,
148 | 
149 | 
150 |   /*
151 |   |-----------------------------------------------------------------------------
152 |   | Screens                      https://tailwindcss.com/docs/responsive-design
153 |   |-----------------------------------------------------------------------------
154 |   |
155 |   | Screens in Tailwind are translated to CSS media queries. They define the
156 |   | responsive breakpoints for your project. By default Tailwind takes a
157 |   | "mobile first" approach, where each screen size represents a minimum
158 |   | viewport width. Feel free to have as few or as many screens as you
159 |   | want, naming them in whatever way you'd prefer for your project.
160 |   |
161 |   | Tailwind also allows for more complex screen definitions, which can be
162 |   | useful in certain situations. Be sure to see the full responsive
163 |   | documentation for a complete list of options.
164 |   |
165 |   | Class name: .{screen}:{utility}
166 |   |
167 |   */
168 | 
169 |   screens: {
170 |     'sm': '576px',
171 |     'md': '768px',
172 |     'lg': '992px',
173 |     'xl': '1200px',
174 |   },
175 | 
176 |   /*
177 |   |-----------------------------------------------------------------------------
178 |   | Fonts                                    https://tailwindcss.com/docs/fonts
179 |   |-----------------------------------------------------------------------------
180 |   |
181 |   | Here is where you define your project's font stack, or font families.
182 |   | Keep in mind that Tailwind doesn't actually load any fonts for you.
183 |   | If you're using custom fonts you'll need to import them prior to
184 |   | defining them here.
185 |   |
186 |   | By default we provide a native font stack that works remarkably well on
187 |   | any device or OS you're using, since it just uses the default fonts
188 |   | provided by the platform.
189 |   |
190 |   | Class name: .font-{name}
191 |   |
192 |   */
193 | 
194 |   fonts: {
195 |     'sans': [
196 |       'system-ui',
197 |       'BlinkMacSystemFont',
198 |       '-apple-system',
199 |       'Segoe UI',
200 |       'Roboto',
201 |       'Oxygen',
202 |       'Ubuntu',
203 |       'Cantarell',
204 |       'Fira Sans',
205 |       'Droid Sans',
206 |       'Helvetica Neue',
207 |       'sans-serif',
208 |     ],
209 |     'serif': [
210 |       'Constantia',
211 |       'Lucida Bright',
212 |       'Lucidabright',
213 |       'Lucida Serif',
214 |       'Lucida',
215 |       'DejaVu Serif',
216 |       'Bitstream Vera Serif',
217 |       'Liberation Serif',
218 |       'Georgia',
219 |       'serif',
220 |     ],
221 |     'mono': [
222 |       'Menlo',
223 |       'Monaco',
224 |       'Consolas',
225 |       'Liberation Mono',
226 |       'Courier New',
227 |       'monospace',
228 |     ]
229 |   },
230 | 
231 | 
232 |   /*
233 |   |-----------------------------------------------------------------------------
234 |   | Text sizes                         https://tailwindcss.com/docs/text-sizing
235 |   |-----------------------------------------------------------------------------
236 |   |
237 |   | Here is where you define your text sizes. Name these in whatever way
238 |   | makes the most sense to you. We use size names by default, but
239 |   | you're welcome to use a numeric scale or even something else
240 |   | entirely.
241 |   |
242 |   | By default Tailwind uses the "rem" unit type for most measurements.
243 |   | This allows you to set a root font size which all other sizes are
244 |   | then based on. That said, you are free to use whatever units you
245 |   | prefer, be it rems, ems, pixels or other.
246 |   |
247 |   | Class name: .text-{size}
248 |   |
249 |   */
250 | 
251 |   textSizes: {
252 |     'xs': '.75rem',     // 12px
253 |     'sm': '.875rem',    // 14px
254 |     'base': '1rem',     // 16px
255 |     'lg': '1.125rem',   // 18px
256 |     'xl': '1.25rem',    // 20px
257 |     '2xl': '1.5rem',    // 24px
258 |     '3xl': '1.875rem',  // 30px
259 |     '4xl': '2.25rem',   // 36px
260 |     '5xl': '3rem',      // 48px
261 |   },
262 | 
263 | 
264 |   /*
265 |   |-----------------------------------------------------------------------------
266 |   | Font weights                       https://tailwindcss.com/docs/font-weight
267 |   |-----------------------------------------------------------------------------
268 |   |
269 |   | Here is where you define your font weights. We've provided a list of
270 |   | common font weight names with their respective numeric scale values
271 |   | to get you started. It's unlikely that your project will require
272 |   | all of these, so we recommend removing those you don't need.
273 |   |
274 |   | Class name: .font-{weight}
275 |   |
276 |   */
277 | 
278 |   fontWeights: {
279 |     'hairline': 100,
280 |     'thin': 200,
281 |     'light': 300,
282 |     'normal': 400,
283 |     'medium': 500,
284 |     'semibold': 600,
285 |     'bold': 700,
286 |     'extrabold': 800,
287 |     'black': 900,
288 |   },
289 | 
290 | 
291 |   /*
292 |   |-----------------------------------------------------------------------------
293 |   | Leading (line height)              https://tailwindcss.com/docs/line-height
294 |   |-----------------------------------------------------------------------------
295 |   |
296 |   | Here is where you define your line height values, or as we call
297 |   | them in Tailwind, leadings.
298 |   |
299 |   | Class name: .leading-{size}
300 |   |
301 |   */
302 | 
303 |   leading: {
304 |     'none': 1,
305 |     'tight': 1.25,
306 |     'normal': 1.5,
307 |     'loose': 2,
308 |   },
309 | 
310 | 
311 |   /*
312 |   |-----------------------------------------------------------------------------
313 |   | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
314 |   |-----------------------------------------------------------------------------
315 |   |
316 |   | Here is where you define your letter spacing values, or as we call
317 |   | them in Tailwind, tracking.
318 |   |
319 |   | Class name: .tracking-{size}
320 |   |
321 |   */
322 | 
323 |   tracking: {
324 |     'tight': '-0.05em',
325 |     'normal': '0',
326 |     'wide': '0.05em',
327 |   },
328 | 
329 | 
330 |   /*
331 |   |-----------------------------------------------------------------------------
332 |   | Text colors                         https://tailwindcss.com/docs/text-color
333 |   |-----------------------------------------------------------------------------
334 |   |
335 |   | Here is where you define your text colors. By default these use the
336 |   | color palette we defined above, however you're welcome to set these
337 |   | independently if that makes sense for your project.
338 |   |
339 |   | Class name: .text-{color}
340 |   |
341 |   */
342 | 
343 |   textColors: colors,
344 | 
345 | 
346 |   /*
347 |   |-----------------------------------------------------------------------------
348 |   | Background colors             https://tailwindcss.com/docs/background-color
349 |   |-----------------------------------------------------------------------------
350 |   |
351 |   | Here is where you define your background colors. By default these use
352 |   | the color palette we defined above, however you're welcome to set
353 |   | these independently if that makes sense for your project.
354 |   |
355 |   | Class name: .bg-{color}
356 |   |
357 |   */
358 | 
359 |   backgroundColors: colors,
360 | 
361 | 
362 |   /*
363 |   |-----------------------------------------------------------------------------
364 |   | Border widths                     https://tailwindcss.com/docs/border-width
365 |   |-----------------------------------------------------------------------------
366 |   |
367 |   | Here is where you define your border widths. Take note that border
368 |   | widths require a special "default" value set as well. This is the
369 |   | width that will be used when you do not specify a border width.
370 |   |
371 |   | Class name: .border{-side?}{-width?}
372 |   |
373 |   */
374 | 
375 |   borderWidths: {
376 |     default: '1px',
377 |     '0': '0',
378 |     '2': '2px',
379 |     '4': '4px',
380 |     '8': '8px',
381 |   },
382 | 
383 | 
384 |   /*
385 |   |-----------------------------------------------------------------------------
386 |   | Border colors                     https://tailwindcss.com/docs/border-color
387 |   |-----------------------------------------------------------------------------
388 |   |
389 |   | Here is where you define your border colors. By default these use the
390 |   | color palette we defined above, however you're welcome to set these
391 |   | independently if that makes sense for your project.
392 |   |
393 |   | Take note that border colors require a special "default" value set
394 |   | as well. This is the color that will be used when you do not
395 |   | specify a border color.
396 |   |
397 |   | Class name: .border-{color}
398 |   |
399 |   */
400 | 
401 |   borderColors: Object.assign({ default: colors['grey-light'] }, colors),
402 | 
403 | 
404 |   /*
405 |   |-----------------------------------------------------------------------------
406 |   | Border radius                    https://tailwindcss.com/docs/border-radius
407 |   |-----------------------------------------------------------------------------
408 |   |
409 |   | Here is where you define your border radius values. If a `default` radius
410 |   | is provided, it will be made available as the non-suffixed `.rounded`
411 |   | utility.
412 |   |
413 |   | If your scale includes a `0` value to reset already rounded corners, it's
414 |   | a good idea to put it first so other values are able to override it.
415 |   |
416 |   | Class name: .rounded{-side?}{-size?}
417 |   |
418 |   */
419 | 
420 |   borderRadius: {
421 |     'none': '0',
422 |     'sm': '.125rem',
423 |     default: '.25rem',
424 |     'lg': '.5rem',
425 |     'full': '9999px',
426 |   },
427 | 
428 | 
429 |   /*
430 |   |-----------------------------------------------------------------------------
431 |   | Width                                    https://tailwindcss.com/docs/width
432 |   |-----------------------------------------------------------------------------
433 |   |
434 |   | Here is where you define your width utility sizes. These can be
435 |   | percentage based, pixels, rems, or any other units. By default
436 |   | we provide a sensible rem based numeric scale, a percentage
437 |   | based fraction scale, plus some other common use-cases. You
438 |   | can, of course, modify these values as needed.
439 |   |
440 |   |
441 |   | It's also worth mentioning that Tailwind automatically escapes
442 |   | invalid CSS class name characters, which allows you to have
443 |   | awesome classes like .w-2/3.
444 |   |
445 |   | Class name: .w-{size}
446 |   |
447 |   */
448 | 
449 |   width: {
450 |     'auto': 'auto',
451 |     'px': '1px',
452 |     '1': '0.25rem',
453 |     '2': '0.5rem',
454 |     '3': '0.75rem',
455 |     '4': '1rem',
456 |     '6': '1.5rem',
457 |     '8': '2rem',
458 |     '10': '2.5rem',
459 |     '12': '3.35rem',
460 |     '16': '4rem',
461 |     '24': '6rem',
462 |     '32': '8rem',
463 |     '48': '12rem',
464 |     '64': '16rem',
465 |     '1/2': '50%',
466 |     '1/3': '33.33333%',
467 |     '2/3': '66.66667%',
468 |     '1/4': '25%',
469 |     '3/4': '75%',
470 |     '1/5': '20%',
471 |     '2/5': '40%',
472 |     '3/5': '60%',
473 |     '4/5': '80%',
474 |     '1/6': '16.66667%',
475 |     '5/6': '83.33333%',
476 |     'full': '100%',
477 |     'screen': '100vw'
478 |   },
479 | 
480 | 
481 |   /*
482 |   |-----------------------------------------------------------------------------
483 |   | Height                                  https://tailwindcss.com/docs/height
484 |   |-----------------------------------------------------------------------------
485 |   |
486 |   | Here is where you define your height utility sizes. These can be
487 |   | percentage based, pixels, rems, or any other units. By default
488 |   | we provide a sensible rem based numeric scale plus some other
489 |   | common use-cases. You can, of course, modify these values as
490 |   | needed.
491 |   |
492 |   | Class name: .h-{size}
493 |   |
494 |   */
495 | 
496 |   height: {
497 |     'auto': 'auto',
498 |     'px': '1px',
499 |     '1': '0.25rem',
500 |     '2': '0.5rem',
501 |     '3': '0.75rem',
502 |     '4': '1rem',
503 |     '6': '1.5rem',
504 |     '8': '2rem',
505 |     '10': '2.5rem',
506 |     '12': '3.35rem',
507 |     '16': '4rem',
508 |     '24': '6rem',
509 |     '32': '8rem',
510 |     '48': '12rem',
511 |     '64': '16rem',
512 |     'full': '100%',
513 |     'screen': '100vh'
514 |   },
515 | 
516 | 
517 |   /*
518 |   |-----------------------------------------------------------------------------
519 |   | Minimum width                        https://tailwindcss.com/docs/min-width
520 |   |-----------------------------------------------------------------------------
521 |   |
522 |   | Here is where you define your minimum width utility sizes. These can
523 |   | be percentage based, pixels, rems, or any other units. We provide a
524 |   | couple common use-cases by default. You can, of course, modify
525 |   | these values as needed.
526 |   |
527 |   | Class name: .min-w-{size}
528 |   |
529 |   */
530 | 
531 |   minWidth: {
532 |     '0': '0',
533 |     'full': '100%',
534 |   },
535 | 
536 | 
537 |   /*
538 |   |-----------------------------------------------------------------------------
539 |   | Minimum height                      https://tailwindcss.com/docs/min-height
540 |   |-----------------------------------------------------------------------------
541 |   |
542 |   | Here is where you define your minimum height utility sizes. These can
543 |   | be percentage based, pixels, rems, or any other units. We provide a
544 |   | few common use-cases by default. You can, of course, modify these
545 |   | values as needed.
546 |   |
547 |   | Class name: .min-h-{size}
548 |   |
549 |   */
550 | 
551 |   minHeight: {
552 |     '0': '0',
553 |     'full': '100%',
554 |     'screen': '100vh'
555 |   },
556 | 
557 | 
558 |   /*
559 |   |-----------------------------------------------------------------------------
560 |   | Maximum width                        https://tailwindcss.com/docs/max-width
561 |   |-----------------------------------------------------------------------------
562 |   |
563 |   | Here is where you define your maximum width utility sizes. These can
564 |   | be percentage based, pixels, rems, or any other units. By default
565 |   | we provide a sensible rem based scale and a "full width" size,
566 |   | which is basically a reset utility. You can, of course,
567 |   | modify these values as needed.
568 |   |
569 |   | Class name: .max-w-{size}
570 |   |
571 |   */
572 | 
573 |   maxWidth: {
574 |     'xs': '20rem',
575 |     'sm': '30rem',
576 |     'md': '40rem',
577 |     'lg': '50rem',
578 |     'xl': '60rem',
579 |     '2xl': '70rem',
580 |     '3xl': '80rem',
581 |     '4xl': '90rem',
582 |     '5xl': '100rem',
583 |     'full': '100%',
584 |   },
585 | 
586 | 
587 |   /*
588 |   |-----------------------------------------------------------------------------
589 |   | Maximum height                      https://tailwindcss.com/docs/max-height
590 |   |-----------------------------------------------------------------------------
591 |   |
592 |   | Here is where you define your maximum height utility sizes. These can
593 |   | be percentage based, pixels, rems, or any other units. We provide a
594 |   | couple common use-cases by default. You can, of course, modify
595 |   | these values as needed.
596 |   |
597 |   | Class name: .max-h-{size}
598 |   |
599 |   */
600 | 
601 |   maxHeight: {
602 |     'full': '100%',
603 |     'screen': '100vh',
604 |   },
605 | 
606 | 
607 |   /*
608 |   |-----------------------------------------------------------------------------
609 |   | Padding                                https://tailwindcss.com/docs/padding
610 |   |-----------------------------------------------------------------------------
611 |   |
612 |   | Here is where you define your padding utility sizes. These can be
613 |   | percentage based, pixels, rems, or any other units. By default we
614 |   | provide a sensible rem based numeric scale plus a couple other
615 |   | common use-cases like "1px". You can, of course, modify these
616 |   | values as needed.
617 |   |
618 |   | Class name: .p{side?}-{size}
619 |   |
620 |   */
621 | 
622 |   padding: {
623 |     'px': '1px',
624 |     '0': '0',
625 |     '1': '0.25rem',
626 |     '2': '0.5rem',
627 |     '3': '0.75rem',
628 |     '4': '1rem',
629 |     '6': '1.5rem',
630 |     '8': '2rem',
631 |   },
632 | 
633 | 
634 |   /*
635 |   |-----------------------------------------------------------------------------
636 |   | Margin                                  https://tailwindcss.com/docs/margin
637 |   |-----------------------------------------------------------------------------
638 |   |
639 |   | Here is where you define your margin utility sizes. These can be
640 |   | percentage based, pixels, rems, or any other units. By default we
641 |   | provide a sensible rem based numeric scale plus a couple other
642 |   | common use-cases like "1px". You can, of course, modify these
643 |   | values as needed.
644 |   |
645 |   | Class name: .m{side?}-{size}
646 |   |
647 |   */
648 | 
649 |   margin: {
650 |     'auto': 'auto',
651 |     'px': '1px',
652 |     '0': '0',
653 |     '1': '0.25rem',
654 |     '2': '0.5rem',
655 |     '3': '0.75rem',
656 |     '4': '1rem',
657 |     '6': '1.5rem',
658 |     '8': '2rem',
659 |   },
660 | 
661 | 
662 |   /*
663 |   |-----------------------------------------------------------------------------
664 |   | Negative margin                https://tailwindcss.com/docs/negative-margin
665 |   |-----------------------------------------------------------------------------
666 |   |
667 |   | Here is where you define your negative margin utility sizes. These can
668 |   | be percentage based, pixels, rems, or any other units. By default we
669 |   | provide matching values to the padding scale since these utilities
670 |   | generally get used together. You can, of course, modify these
671 |   | values as needed.
672 |   |
673 |   | Class name: .-m{side?}-{size}
674 |   |
675 |   */
676 | 
677 |   negativeMargin: {
678 |     'px': '1px',
679 |     '0': '0',
680 |     '1': '0.25rem',
681 |     '2': '0.5rem',
682 |     '3': '0.75rem',
683 |     '4': '1rem',
684 |     '6': '1.5rem',
685 |     '8': '2rem',
686 |   },
687 | 
688 | 
689 |   /*
690 |   |-----------------------------------------------------------------------------
691 |   | Shadows                                https://tailwindcss.com/docs/shadows
692 |   |-----------------------------------------------------------------------------
693 |   |
694 |   | Here is where you define your shadow utilities. As you can see from
695 |   | the defaults we provide, it's possible to apply multiple shadows
696 |   | per utility using comma separation.
697 |   |
698 |   | If a `default` shadow is provided, it will be made available as the non-
699 |   | suffixed `.shadow` utility.
700 |   |
701 |   | Class name: .shadow-{size?}
702 |   |
703 |   */
704 | 
705 |   shadows: {
706 |     default: '0 2px 4px 0 rgba(0,0,0,0.10)',
707 |     'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
708 |     'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
709 |     'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
710 |     'none': 'none',
711 |   },
712 | 
713 | 
714 |   /*
715 |   |-----------------------------------------------------------------------------
716 |   | Z-index                                https://tailwindcss.com/docs/z-index
717 |   |-----------------------------------------------------------------------------
718 |   |
719 |   | Here is where you define your z-index utility values. By default we
720 |   | provide a sensible numeric scale. You can, of course, modify these
721 |   | values as needed.
722 |   |
723 |   | Class name: .z-{index}
724 |   |
725 |   */
726 | 
727 |   zIndex: {
728 |     'auto': 'auto',
729 |     '0': 0,
730 |     '10': 10,
731 |     '20': 20,
732 |     '30': 30,
733 |     '40': 40,
734 |     '50': 50,
735 |   },
736 | 
737 | 
738 |   /*
739 |   |-----------------------------------------------------------------------------
740 |   | Opacity                                https://tailwindcss.com/docs/opacity
741 |   |-----------------------------------------------------------------------------
742 |   |
743 |   | Here is where you define your opacity utility values. By default we
744 |   | provide a sensible numeric scale. You can, of course, modify these
745 |   | values as needed.
746 |   |
747 |   | Class name: .opacity-{name}
748 |   |
749 |   */
750 | 
751 |   opacity: {
752 |     '0': '0',
753 |     '25': '.25',
754 |     '50': '.5',
755 |     '75': '.75',
756 |     '100': '1',
757 |   },
758 | 
759 | 
760 |   /*
761 |   |-----------------------------------------------------------------------------
762 |   | SVG fill                                   https://tailwindcss.com/docs/svg
763 |   |-----------------------------------------------------------------------------
764 |   |
765 |   | Here is where you define your SVG fill colors. By default we just provide
766 |   | `fill-current` which sets the fill to the current text color. This lets you
767 |   | specify a fill color using existing text color utilities and helps keep the
768 |   | generated CSS file size down.
769 |   |
770 |   | Class name: .fill-{name}
771 |   |
772 |   */
773 | 
774 |   svgFill: {
775 |     'current': 'currentColor',
776 |   },
777 | 
778 | 
779 |   /*
780 |   |-----------------------------------------------------------------------------
781 |   | SVG stroke                                 https://tailwindcss.com/docs/svg
782 |   |-----------------------------------------------------------------------------
783 |   |
784 |   | Here is where you define your SVG stroke colors. By default we just provide
785 |   | `stroke-current` which sets the stroke to the current text color. This lets
786 |   | you specify a stroke color using existing text color utilities and helps
787 |   | keep the generated CSS file size down.
788 |   |
789 |   | Class name: .stroke-{name}
790 |   |
791 |   */
792 | 
793 |   svgStroke: {
794 |     'current': 'currentColor',
795 |   },
796 | 
797 | 
798 |   /*
799 |   |-----------------------------------------------------------------------------
800 |   | Modules                  https://tailwindcss.com/docs/configuration#modules
801 |   |-----------------------------------------------------------------------------
802 |   |
803 |   | Here is where you control which modules are generated and what variants are
804 |   | generated for each of those modules.
805 |   |
806 |   | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover'
807 |   |
808 |   | To disable a module completely, use `false` instead of an array.
809 |   |
810 |   */
811 | 
812 |   modules: {
813 |     appearance: ['responsive'],
814 |     backgroundAttachment: ['responsive'],
815 |     backgroundColors: ['responsive', 'hover'],
816 |     backgroundPosition: ['responsive'],
817 |     backgroundRepeat: ['responsive'],
818 |     backgroundSize: ['responsive'],
819 |     borderColors: ['responsive', 'hover'],
820 |     borderRadius: ['responsive'],
821 |     borderStyle: ['responsive'],
822 |     borderWidths: ['responsive'],
823 |     cursor: ['responsive'],
824 |     display: ['responsive'],
825 |     flexbox: ['responsive'],
826 |     float: ['responsive'],
827 |     fonts: ['responsive'],
828 |     fontWeights: ['responsive', 'hover'],
829 |     height: ['responsive'],
830 |     leading: ['responsive'],
831 |     lists: ['responsive'],
832 |     margin: ['responsive'],
833 |     maxHeight: ['responsive'],
834 |     maxWidth: ['responsive'],
835 |     minHeight: ['responsive'],
836 |     minWidth: ['responsive'],
837 |     negativeMargin: ['responsive'],
838 |     opacity: ['responsive'],
839 |     overflow: ['responsive'],
840 |     padding: ['responsive'],
841 |     pointerEvents: ['responsive'],
842 |     position: ['responsive'],
843 |     resize: ['responsive'],
844 |     shadows: ['responsive'],
845 |     svgFill: [],
846 |     svgStroke: [],
847 |     textAlign: ['responsive'],
848 |     textColors: ['responsive', 'hover'],
849 |     textSizes: ['responsive'],
850 |     textStyle: ['responsive', 'hover'],
851 |     tracking: ['responsive'],
852 |     userSelect: ['responsive'],
853 |     verticalAlign: ['responsive'],
854 |     visibility: ['responsive'],
855 |     whitespace: ['responsive'],
856 |     width: ['responsive'],
857 |     zIndex: ['responsive'],
858 |   },
859 | 
860 | 
861 |   /*
862 |   |-----------------------------------------------------------------------------
863 |   | Advanced Options         https://tailwindcss.com/docs/configuration#options
864 |   |-----------------------------------------------------------------------------
865 |   |
866 |   | Here is where you can tweak advanced configuration options. We recommend
867 |   | leaving these options alone unless you absolutely need to change them.
868 |   |
869 |   */
870 | 
871 |   options: {
872 |     prefix: '',
873 |     important: false,
874 |     separator: ':',
875 |   },
876 | 
877 | }
878 | 


--------------------------------------------------------------------------------