├── .gitignore
├── LICENSE
├── README.md
├── TailwindToggle.vue
├── _config.yml
├── dist
    ├── index.html
    └── main.css
├── package.json
├── src
    ├── index.html
    └── main.css
├── tailwind.js
└── webpack.mix.js


/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependency directories
2 | node_modules/
3 | mix-manifest.json


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 nerdalertdk
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tailwindcss-toggle
 2 | An switch toggle for https://tailwindcss.com/
 3 | 
 4 | Basic Html for an toggle switch
 5 | 
 6 | 
 7 | ![Preview](https://i.gyazo.com/73fc88fb978607444ce0f2579e1f05af.png)
 8 | 
 9 | ```html
10 | <div class="mb-2">                
11 |     <div class="form-switch inline-block align-middle">
12 |         <input type="checkbox" name="1" id="1" class="form-switch-checkbox" />
13 |         <label class="form-switch-label" for="1"></label>
14 |     </div>
15 |     <label class="text-xs text-grey-dark" for="1">Default</label>
16 | </div>
17 | ```
18 | 
19 | ## Installation
20 | 
21 | You can install the package with yarn or npm:
22 | 
23 | ```bash
24 | yarn add TowelSoftware/tailwindcss-toggle
25 | ```
26 | 
27 | ```bash
28 | npm install TowelSoftware/tailwindcss-toggle
29 | ```
30 | 
31 | ## More Info
32 | 
33 | Moved most Tailwind classes in to an component since an toggle switch is going to be used more then one time.
34 | Also sadly Tailwind don't have support for all css classes yet
35 | 
36 | 
37 | ```css
38 | @tailwind preflight;
39 | 
40 | /* CHECKBOX TOGGLE SWITCH */
41 | .form-switch {
42 |     @apply relative select-none w-12 mr-2 leading-normal;
43 | }
44 | .form-switch-checkbox {
45 |     @apply hidden;
46 | }
47 | .form-switch-label {
48 |     @apply block overflow-hidden cursor-pointer bg-white border rounded-full h-6  shadow-inner;
49 | 
50 |     transition: background-color 0.2s ease-in;
51 | }
52 | .form-switch-label:before {
53 |     @apply absolute block bg-white pin-y w-6 border rounded-full -ml-1;
54 |     
55 |     right: 50%;
56 |     content: "";
57 |     transition: all 0.2s ease-in;
58 | }
59 | .form-switch-checkbox:checked + .form-switch-label,
60 | .form-switch-checkbox:checked + .form-switch-label:before {
61 |  
62 | }
63 | .form-switch-checkbox:checked + .form-switch-label {
64 |     @apply bg-green shadow-none;
65 | }
66 | .form-switch-checkbox:checked + .form-switch-label:before {
67 |     @apply pin-r;
68 | }
69 | 
70 | @tailwind utilities;
71 | 
72 | ```
73 | 
74 | ## Using Tailwindcss-toggle as a single file component
75 | 
76 | If you are going to use it in single file *.vue components checkout how it is implemented in the [TailwindToggle.vue](/TailwindToggle.vue) file.
77 | 
78 | You would then go on to use it in your app like this.
79 | 
80 | ```html
81 | <div>
82 |     <AppToggle v-model="isToggleOn" onText="Hide Map" offText="Show Map"/>
83 | </div>
84 | <script>
85 |     import AppToggle from '@/components/AppToggle'
86 |     export default {
87 |         data () {
88 |             return {
89 |             isToggleOn: true
90 |             }
91 |         }
92 |     }
93 | </script>
94 | ```
95 | 


--------------------------------------------------------------------------------
/TailwindToggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>                
 3 |     <div class="form-switch inline-block align-middle">
 4 |       <input v-bind:value="value" v-model="isToggleOn" v-on:change="$emit('input', $event.target.checked)" type="checkbox" name="1" id="1" class="form-switch-checkbox" />
 5 |       <label class="form-switch-label" for="1"></label>
 6 |     </div>
 7 |     <label class="text-xs text-grey-dark" for="1">{{ `${ isToggleOn ? onText : offText }` }}</label>
 8 | </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   mounted () {
14 |     this.isToggleOn = this.value
15 |   },
16 |   props: ['value', 'onText', 'offText'],
17 |   data () {
18 |     return {
19 |       isToggleOn: false
20 |     }
21 |   }
22 | }
23 | </script>
24 | 
25 | <style lang="postcss">
26 |   /* CHECKBOX TOGGLE SWITCH */
27 |   .form-switch {
28 |       @apply relative select-none w-12 mr-2 leading-normal;
29 |   }
30 |   .form-switch-checkbox {
31 |       @apply hidden;
32 |   }
33 |   .form-switch-label {
34 |       @apply block overflow-hidden cursor-pointer bg-white border rounded-full h-6  shadow-inner;
35 | 
36 |       transition: background-color 0.2s ease-in;
37 |   }
38 |   .form-switch-label:before {
39 |       @apply absolute block bg-white pin-y w-6 border rounded-full -ml-1;
40 |       
41 |       right: 50%;
42 |       content: "";
43 |       transition: all 0.2s ease-in;
44 |   }
45 |   .form-switch-checkbox:checked + .form-switch-label,
46 |   .form-switch-checkbox:checked + .form-switch-label:before {
47 |   
48 |   }
49 |   .form-switch-checkbox:checked + .form-switch-label {
50 |       @apply bg-green shadow-none;
51 |   }
52 |   .form-switch-checkbox:checked + .form-switch-label:before {
53 |       @apply pin-r;
54 |   }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-hacker


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     
 8 |     <title>Tailwind Toggle Switch</title>
 9 |     
10 |     <!-- Styles -->
11 |     <link href="main.css" rel="stylesheet">
12 |     
13 | </head>
14 | <body>
15 | 
16 | <div class="container mx-auto h-full flex justify-center items-center pt-8">
17 |     
18 |     <div class="lg:w-1/2 mt-8 h-1/2">
19 |         <h1 class="font-hairline mb-6 text-center">Tailwind Toggle Switch</h1>
20 |         <div class="border-grey-light border-t bg-white p-8 m-6 rounded shadow-md">
21 |             
22 |             <form>
23 |                 <div class="mb-2">                
24 |                     <div class="form-switch inline-block align-middle">
25 |                         <input type="checkbox" name="1" id="1" class="form-switch-checkbox" />
26 |                         <label class="form-switch-label" for="1"></label>
27 |                     </div>
28 |                     <label class="text-xs text-grey-dark" for="1">Default (off)</label>
29 |                 </div>
30 |                 
31 |                 <div class="mb-2">                
32 |                     <div class="form-switch inline-block align-middle">
33 |                         <input type="checkbox" name="1.1" id="1.1" class="form-switch-checkbox" checked/>
34 |                         <label class="form-switch-label" for="1.1"></label>
35 |                     </div>
36 |                     <label class="text-xs text-grey-dark" for="1.1">Default (on)</label>
37 |                 </div>
38 |                 
39 |                 <div class="mb-2">
40 |                     <div class="form-switch inline-block align-middle">
41 |                         <input type="checkbox" name="2" id="2" class="form-switch-checkbox" />
42 |                         <label class="form-switch-label bg-blue" for="2"></label>
43 |                     </div>
44 |                     <label class="text-xs text-grey-dark" for="2">Blue</label>
45 |                 </div>
46 |                 
47 |                 <div class="mb-2">
48 |                     <div class="form-switch inline-block align-middle">
49 |                         <input type="checkbox" name="3" id="3" class="form-switch-checkbox" />
50 |                         <label class="form-switch-label bg-red" for="3"></label>
51 |                     </div>
52 |                     <label class="text-xs text-grey-dark" for="3">Red</label>
53 |                 </div>
54 |                 
55 |             </form>
56 |             
57 |         </div>
58 |     </div>
59 | </div>
60 | <footer class="w-full px-8 pb-4 pin-b absolute text-center text-grey text-xs mt-8">By <a href="https://towel.dk" class="text-grey">Towel Software</a>.</footer>
61 | 
62 | </body>
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-toggle",
 3 |   "version": "1.0.0",
 4 |   "description": "An switch toggle for https://tailwindcss.com/",
 5 |   "main": "tailwind.js",
 6 |   "dependencies": {
 7 |     "laravel-mix": "^2.0.0",
 8 |     "tailwindcss": "^0.4.2"
 9 |   },
10 |   "devDependencies": {},
11 |    "scripts": {
12 |         "dev": "npm run development",
13 |         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
14 |         "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
15 |         "watch-poll": "npm run watch -- --watch-poll",
16 |         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
17 |         "prod": "npm run production",
18 |         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
19 |     },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/TowelSoftware/tailwindcss-toggle.git"
23 |   },
24 |   "keywords": [],
25 |   "author": "Michael",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/TowelSoftware/tailwindcss-toggle/issues"
29 |   },
30 |   "homepage": "https://github.com/TowelSoftware/tailwindcss-toggle#readme"
31 | }
32 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     
 8 |     <title>Tailwind Toggle Switch</title>
 9 |     
10 |     <!-- Styles -->
11 |     <link href="main.css" rel="stylesheet">
12 |     
13 | </head>
14 | <body>
15 | 
16 | <div class="container mx-auto h-full flex justify-center items-center pt-8">
17 |     
18 |     <div class="lg:w-1/2 mt-8 h-1/2">
19 |         <h1 class="font-hairline mb-6 text-center">Tailwind Toggle Switch</h1>
20 |         <div class="border-grey-light border-t bg-white p-8 m-6 rounded shadow-md">
21 |             
22 |             <form>
23 |                 <div class="mb-2">                
24 |                     <div class="form-switch inline-block align-middle">
25 |                         <input type="checkbox" name="1" id="1" class="form-switch-checkbox" />
26 |                         <label class="form-switch-label" for="1"></label>
27 |                     </div>
28 |                     <label class="text-xs text-grey-dark" for="1">Default (off)</label>
29 |                 </div>
30 |                 
31 |                 <div class="mb-2">                
32 |                     <div class="form-switch inline-block align-middle">
33 |                         <input type="checkbox" name="1.1" id="1.1" class="form-switch-checkbox" checked/>
34 |                         <label class="form-switch-label" for="1.1"></label>
35 |                     </div>
36 |                     <label class="text-xs text-grey-dark" for="1.1">Default (on)</label>
37 |                 </div>
38 |                 
39 |                 <div class="mb-2">
40 |                     <div class="form-switch inline-block align-middle">
41 |                         <input type="checkbox" name="2" id="2" class="form-switch-checkbox" />
42 |                         <label class="form-switch-label bg-blue" for="2"></label>
43 |                     </div>
44 |                     <label class="text-xs text-grey-dark" for="2">Blue</label>
45 |                 </div>
46 |                 
47 |                 <div class="mb-2">
48 |                     <div class="form-switch inline-block align-middle">
49 |                         <input type="checkbox" name="3" id="3" class="form-switch-checkbox" />
50 |                         <label class="form-switch-label bg-red" for="3"></label>
51 |                     </div>
52 |                     <label class="text-xs text-grey-dark" for="3">Red</label>
53 |                 </div>
54 |                 
55 |             </form>
56 |             
57 |         </div>
58 |     </div>
59 | </div>
60 | <footer class="w-full px-8 pb-4 pin-b absolute text-center text-grey text-xs mt-8">By <a href="https://towel.dk" class="text-grey">Towel Software</a>.</footer>
61 | 
62 | </body>
63 | 


--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind preflight;
 2 | 
 3 | /* CHECKBOX TOGGLE SWITCH */
 4 | .form-switch {
 5 |     @apply relative select-none w-12 mr-2 leading-normal;
 6 | }
 7 | .form-switch-checkbox {
 8 |     @apply hidden;
 9 | }
10 | .form-switch-label {
11 |     @apply block overflow-hidden cursor-pointer bg-white border rounded-full h-6  shadow-inner;
12 | 
13 |     transition: background-color 0.2s ease-in;
14 | }
15 | .form-switch-label:before {
16 |     @apply absolute block bg-white pin-y w-6 border rounded-full -ml-1;
17 |     
18 |     right: 50%;
19 |     content: "";
20 |     transition: all 0.2s ease-in;
21 | }
22 | .form-switch-checkbox:checked + .form-switch-label,
23 | .form-switch-checkbox:checked + .form-switch-label:before {
24 |  
25 | }
26 | .form-switch-checkbox:checked + .form-switch-label {
27 |     @apply bg-green shadow-none;
28 | }
29 | .form-switch-checkbox:checked + .form-switch-label:before {
30 |     @apply pin-r;
31 | }
32 | 
33 | @tailwind utilities;
34 | 


--------------------------------------------------------------------------------
/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 |   |-----------------------------------------------------------------------------
179 |   | Fonts                                    https://tailwindcss.com/docs/fonts
180 |   |-----------------------------------------------------------------------------
181 |   |
182 |   | Here is where you define your project's font stack, or font families.
183 |   | Keep in mind that Tailwind doesn't actually load any fonts for you.
184 |   | If you're using custom fonts you'll need to import them prior to
185 |   | defining them here.
186 |   |
187 |   | By default we provide a native font stack that works remarkably well on
188 |   | any device or OS you're using, since it just uses the default fonts
189 |   | provided by the platform.
190 |   |
191 |   | Class name: .font-{name}
192 |   |
193 |   */
194 | 
195 |   fonts: {
196 |     'sans': [
197 |       'system-ui',
198 |       'BlinkMacSystemFont',
199 |       '-apple-system',
200 |       'Segoe UI',
201 |       'Roboto',
202 |       'Oxygen',
203 |       'Ubuntu',
204 |       'Cantarell',
205 |       'Fira Sans',
206 |       'Droid Sans',
207 |       'Helvetica Neue',
208 |       'sans-serif',
209 |     ],
210 |     'serif': [
211 |       'Constantia',
212 |       'Lucida Bright',
213 |       'Lucidabright',
214 |       'Lucida Serif',
215 |       'Lucida',
216 |       'DejaVu Serif',
217 |       'Bitstream Vera Serif',
218 |       'Liberation Serif',
219 |       'Georgia',
220 |       'serif',
221 |     ],
222 |     'mono': [
223 |       'Menlo',
224 |       'Monaco',
225 |       'Consolas',
226 |       'Liberation Mono',
227 |       'Courier New',
228 |       'monospace',
229 |     ]
230 |   },
231 | 
232 | 
233 |   /*
234 |   |-----------------------------------------------------------------------------
235 |   | Text sizes                         https://tailwindcss.com/docs/text-sizing
236 |   |-----------------------------------------------------------------------------
237 |   |
238 |   | Here is where you define your text sizes. Name these in whatever way
239 |   | makes the most sense to you. We use size names by default, but
240 |   | you're welcome to use a numeric scale or even something else
241 |   | entirely.
242 |   |
243 |   | By default Tailwind uses the "rem" unit type for most measurements.
244 |   | This allows you to set a root font size which all other sizes are
245 |   | then based on. That said, you are free to use whatever units you
246 |   | prefer, be it rems, ems, pixels or other.
247 |   |
248 |   | Class name: .text-{size}
249 |   |
250 |   */
251 | 
252 |   textSizes: {
253 |     'xs': '.75rem',     // 12px
254 |     'sm': '.875rem',    // 14px
255 |     'base': '1rem',     // 16px
256 |     'lg': '1.125rem',   // 18px
257 |     'xl': '1.25rem',    // 20px
258 |     '2xl': '1.5rem',    // 24px
259 |     '3xl': '1.875rem',  // 30px
260 |     '4xl': '2.25rem',   // 36px
261 |     '5xl': '3rem',      // 48px
262 |   },
263 | 
264 | 
265 |   /*
266 |   |-----------------------------------------------------------------------------
267 |   | Font weights                       https://tailwindcss.com/docs/font-weight
268 |   |-----------------------------------------------------------------------------
269 |   |
270 |   | Here is where you define your font weights. We've provided a list of
271 |   | common font weight names with their respective numeric scale values
272 |   | to get you started. It's unlikely that your project will require
273 |   | all of these, so we recommend removing those you don't need.
274 |   |
275 |   | Class name: .font-{weight}
276 |   |
277 |   */
278 | 
279 |   fontWeights: {
280 |     'hairline': 100,
281 |     'thin': 200,
282 |     'light': 300,
283 |     'normal': 400,
284 |     'medium': 500,
285 |     'semibold': 600,
286 |     'bold': 700,
287 |     'extrabold': 800,
288 |     'black': 900,
289 |   },
290 | 
291 | 
292 |   /*
293 |   |-----------------------------------------------------------------------------
294 |   | Leading (line height)              https://tailwindcss.com/docs/line-height
295 |   |-----------------------------------------------------------------------------
296 |   |
297 |   | Here is where you define your line height values, or as we call
298 |   | them in Tailwind, leadings.
299 |   |
300 |   | Class name: .leading-{size}
301 |   |
302 |   */
303 | 
304 |   leading: {
305 |     'none': 1,
306 |     'tight': 1.25,
307 |     'normal': 1.5,
308 |     'loose': 2,
309 |   },
310 | 
311 | 
312 |   /*
313 |   |-----------------------------------------------------------------------------
314 |   | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
315 |   |-----------------------------------------------------------------------------
316 |   |
317 |   | Here is where you define your letter spacing values, or as we call
318 |   | them in Tailwind, tracking.
319 |   |
320 |   | Class name: .tracking-{size}
321 |   |
322 |   */
323 | 
324 |   tracking: {
325 |     'tight': '-0.05em',
326 |     'normal': '0',
327 |     'wide': '0.05em',
328 |   },
329 | 
330 | 
331 |   /*
332 |   |-----------------------------------------------------------------------------
333 |   | Text colors                         https://tailwindcss.com/docs/text-color
334 |   |-----------------------------------------------------------------------------
335 |   |
336 |   | Here is where you define your text colors. By default these use the
337 |   | color palette we defined above, however you're welcome to set these
338 |   | independently if that makes sense for your project.
339 |   |
340 |   | Class name: .text-{color}
341 |   |
342 |   */
343 | 
344 |   textColors: colors,
345 | 
346 | 
347 |   /*
348 |   |-----------------------------------------------------------------------------
349 |   | Background colors             https://tailwindcss.com/docs/background-color
350 |   |-----------------------------------------------------------------------------
351 |   |
352 |   | Here is where you define your background colors. By default these use
353 |   | the color palette we defined above, however you're welcome to set
354 |   | these independently if that makes sense for your project.
355 |   |
356 |   | Class name: .bg-{color}
357 |   |
358 |   */
359 | 
360 |   backgroundColors: colors,
361 | 
362 | 
363 |   /*
364 |   |-----------------------------------------------------------------------------
365 |   | Border widths                     https://tailwindcss.com/docs/border-width
366 |   |-----------------------------------------------------------------------------
367 |   |
368 |   | Here is where you define your border widths. Take note that border
369 |   | widths require a special "default" value set as well. This is the
370 |   | width that will be used when you do not specify a border width.
371 |   |
372 |   | Class name: .border{-side?}{-width?}
373 |   |
374 |   */
375 | 
376 |   borderWidths: {
377 |     default: '1px',
378 |     '0': '0',
379 |     '2': '2px',
380 |     '4': '4px',
381 |     '8': '8px',
382 |   },
383 | 
384 | 
385 |   /*
386 |   |-----------------------------------------------------------------------------
387 |   | Border colors                     https://tailwindcss.com/docs/border-color
388 |   |-----------------------------------------------------------------------------
389 |   |
390 |   | Here is where you define your border colors. By default these use the
391 |   | color palette we defined above, however you're welcome to set these
392 |   | independently if that makes sense for your project.
393 |   |
394 |   | Take note that border colors require a special "default" value set
395 |   | as well. This is the color that will be used when you do not
396 |   | specify a border color.
397 |   |
398 |   | Class name: .border-{color}
399 |   |
400 |   */
401 | 
402 |   borderColors: Object.assign({ default: colors['grey-light'] }, colors),
403 | 
404 | 
405 |   /*
406 |   |-----------------------------------------------------------------------------
407 |   | Border radius                    https://tailwindcss.com/docs/border-radius
408 |   |-----------------------------------------------------------------------------
409 |   |
410 |   | Here is where you define your border radius values. If a `default` radius
411 |   | is provided, it will be made available as the non-suffixed `.rounded`
412 |   | utility.
413 |   |
414 |   | If your scale includes a `0` value to reset already rounded corners, it's
415 |   | a good idea to put it first so other values are able to override it.
416 |   |
417 |   | Class name: .rounded{-side?}{-size?}
418 |   |
419 |   */
420 | 
421 |   borderRadius: {
422 |     'none': '0',
423 |     'sm': '.125rem',
424 |     default: '.25rem',
425 |     'lg': '.5rem',
426 |     'full': '9999px',
427 |   },
428 | 
429 | 
430 |   /*
431 |   |-----------------------------------------------------------------------------
432 |   | Width                                    https://tailwindcss.com/docs/width
433 |   |-----------------------------------------------------------------------------
434 |   |
435 |   | Here is where you define your width utility sizes. These can be
436 |   | percentage based, pixels, rems, or any other units. By default
437 |   | we provide a sensible rem based numeric scale, a percentage
438 |   | based fraction scale, plus some other common use-cases. You
439 |   | can, of course, modify these values as needed.
440 |   |
441 |   |
442 |   | It's also worth mentioning that Tailwind automatically escapes
443 |   | invalid CSS class name characters, which allows you to have
444 |   | awesome classes like .w-2/3.
445 |   |
446 |   | Class name: .w-{size}
447 |   |
448 |   */
449 | 
450 |   width: {
451 |     'auto': 'auto',
452 |     'px': '1px',
453 |     '1': '0.25rem',
454 |     '2': '0.5rem',
455 |     '3': '0.75rem',
456 |     '4': '1rem',
457 |     '6': '1.5rem',
458 |     '8': '2rem',
459 |     '10': '2.5rem',
460 |     '12': '3rem',
461 |     '16': '4rem',
462 |     '24': '6rem',
463 |     '32': '8rem',
464 |     '48': '12rem',
465 |     '64': '16rem',
466 |     '1/2': '50%',
467 |     '1/3': '33.33333%',
468 |     '2/3': '66.66667%',
469 |     '1/4': '25%',
470 |     '3/4': '75%',
471 |     '1/5': '20%',
472 |     '2/5': '40%',
473 |     '3/5': '60%',
474 |     '4/5': '80%',
475 |     '1/6': '16.66667%',
476 |     '5/6': '83.33333%',
477 |     'full': '100%',
478 |     'screen': '100vw'
479 |   },
480 | 
481 | 
482 |   /*
483 |   |-----------------------------------------------------------------------------
484 |   | Height                                  https://tailwindcss.com/docs/height
485 |   |-----------------------------------------------------------------------------
486 |   |
487 |   | Here is where you define your height utility sizes. These can be
488 |   | percentage based, pixels, rems, or any other units. By default
489 |   | we provide a sensible rem based numeric scale plus some other
490 |   | common use-cases. You can, of course, modify these values as
491 |   | needed.
492 |   |
493 |   | Class name: .h-{size}
494 |   |
495 |   */
496 | 
497 |   height: {
498 |     'auto': 'auto',
499 |     'px': '1px',
500 |     '1': '0.25rem',
501 |     '2': '0.5rem',
502 |     '3': '0.75rem',
503 |     '4': '1rem',
504 |     '6': '1.5rem',
505 |     '8': '2rem',
506 |     '10': '2.5rem',
507 |     '12': '3rem',
508 |     '16': '4rem',
509 |     '24': '6rem',
510 |     '32': '8rem',
511 |     '48': '12rem',
512 |     '64': '16rem',
513 |     'full': '100%',
514 |     'screen': '100vh'
515 |   },
516 | 
517 | 
518 |   /*
519 |   |-----------------------------------------------------------------------------
520 |   | Minimum width                        https://tailwindcss.com/docs/min-width
521 |   |-----------------------------------------------------------------------------
522 |   |
523 |   | Here is where you define your minimum width utility sizes. These can
524 |   | be percentage based, pixels, rems, or any other units. We provide a
525 |   | couple common use-cases by default. You can, of course, modify
526 |   | these values as needed.
527 |   |
528 |   | Class name: .min-w-{size}
529 |   |
530 |   */
531 | 
532 |   minWidth: {
533 |     '0': '0',
534 |     'full': '100%',
535 |   },
536 | 
537 | 
538 |   /*
539 |   |-----------------------------------------------------------------------------
540 |   | Minimum height                      https://tailwindcss.com/docs/min-height
541 |   |-----------------------------------------------------------------------------
542 |   |
543 |   | Here is where you define your minimum height utility sizes. These can
544 |   | be percentage based, pixels, rems, or any other units. We provide a
545 |   | few common use-cases by default. You can, of course, modify these
546 |   | values as needed.
547 |   |
548 |   | Class name: .min-h-{size}
549 |   |
550 |   */
551 | 
552 |   minHeight: {
553 |     '0': '0',
554 |     'full': '100%',
555 |     'screen': '100vh'
556 |   },
557 | 
558 | 
559 |   /*
560 |   |-----------------------------------------------------------------------------
561 |   | Maximum width                        https://tailwindcss.com/docs/max-width
562 |   |-----------------------------------------------------------------------------
563 |   |
564 |   | Here is where you define your maximum width utility sizes. These can
565 |   | be percentage based, pixels, rems, or any other units. By default
566 |   | we provide a sensible rem based scale and a "full width" size,
567 |   | which is basically a reset utility. You can, of course,
568 |   | modify these values as needed.
569 |   |
570 |   | Class name: .max-w-{size}
571 |   |
572 |   */
573 | 
574 |   maxWidth: {
575 |     'xs': '20rem',
576 |     'sm': '30rem',
577 |     'md': '40rem',
578 |     'lg': '50rem',
579 |     'xl': '60rem',
580 |     '2xl': '70rem',
581 |     '3xl': '80rem',
582 |     '4xl': '90rem',
583 |     '5xl': '100rem',
584 |     'full': '100%',
585 |   },
586 | 
587 | 
588 |   /*
589 |   |-----------------------------------------------------------------------------
590 |   | Maximum height                      https://tailwindcss.com/docs/max-height
591 |   |-----------------------------------------------------------------------------
592 |   |
593 |   | Here is where you define your maximum height utility sizes. These can
594 |   | be percentage based, pixels, rems, or any other units. We provide a
595 |   | couple common use-cases by default. You can, of course, modify
596 |   | these values as needed.
597 |   |
598 |   | Class name: .max-h-{size}
599 |   |
600 |   */
601 | 
602 |   maxHeight: {
603 |     'full': '100%',
604 |     'screen': '100vh',
605 |   },
606 | 
607 | 
608 |   /*
609 |   |-----------------------------------------------------------------------------
610 |   | Padding                                https://tailwindcss.com/docs/padding
611 |   |-----------------------------------------------------------------------------
612 |   |
613 |   | Here is where you define your padding utility sizes. These can be
614 |   | percentage based, pixels, rems, or any other units. By default we
615 |   | provide a sensible rem based numeric scale plus a couple other
616 |   | common use-cases like "1px". You can, of course, modify these
617 |   | values as needed.
618 |   |
619 |   | Class name: .p{side?}-{size}
620 |   |
621 |   */
622 | 
623 |   padding: {
624 |     'px': '1px',
625 |     '0': '0',
626 |     '1': '0.25rem',
627 |     '2': '0.5rem',
628 |     '3': '0.75rem',
629 |     '4': '1rem',
630 |     '6': '1.5rem',
631 |     '8': '2rem',
632 |   },
633 | 
634 | 
635 |   /*
636 |   |-----------------------------------------------------------------------------
637 |   | Margin                                  https://tailwindcss.com/docs/margin
638 |   |-----------------------------------------------------------------------------
639 |   |
640 |   | Here is where you define your margin utility sizes. These can be
641 |   | percentage based, pixels, rems, or any other units. By default we
642 |   | provide a sensible rem based numeric scale plus a couple other
643 |   | common use-cases like "1px". You can, of course, modify these
644 |   | values as needed.
645 |   |
646 |   | Class name: .m{side?}-{size}
647 |   |
648 |   */
649 | 
650 |   margin: {
651 |     'auto': 'auto',
652 |     'px': '1px',
653 |     '0': '0',
654 |     '1': '0.25rem',
655 |     '2': '0.5rem',
656 |     '3': '0.75rem',
657 |     '4': '1rem',
658 |     '6': '1.5rem',
659 |     '8': '2rem',
660 |   },
661 | 
662 | 
663 |   /*
664 |   |-----------------------------------------------------------------------------
665 |   | Negative margin                https://tailwindcss.com/docs/negative-margin
666 |   |-----------------------------------------------------------------------------
667 |   |
668 |   | Here is where you define your negative margin utility sizes. These can
669 |   | be percentage based, pixels, rems, or any other units. By default we
670 |   | provide matching values to the padding scale since these utilities
671 |   | generally get used together. You can, of course, modify these
672 |   | values as needed.
673 |   |
674 |   | Class name: .-m{side?}-{size}
675 |   |
676 |   */
677 | 
678 |   negativeMargin: {
679 |     'px': '1px',
680 |     '0': '0',
681 |     '1': '0.25rem',
682 |     '2': '0.5rem',
683 |     '3': '0.75rem',
684 |     '4': '1rem',
685 |     '6': '1.5rem',
686 |     '8': '2rem',
687 |   },
688 | 
689 | 
690 |   /*
691 |   |-----------------------------------------------------------------------------
692 |   | Shadows                                https://tailwindcss.com/docs/shadows
693 |   |-----------------------------------------------------------------------------
694 |   |
695 |   | Here is where you define your shadow utilities. As you can see from
696 |   | the defaults we provide, it's possible to apply multiple shadows
697 |   | per utility using comma separation.
698 |   |
699 |   | If a `default` shadow is provided, it will be made available as the non-
700 |   | suffixed `.shadow` utility.
701 |   |
702 |   | Class name: .shadow-{size?}
703 |   |
704 |   */
705 | 
706 |   shadows: {
707 |     default: '0 2px 4px 0 rgba(0,0,0,0.10)',
708 |     'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
709 |     'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
710 |     'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
711 |     'none': 'none',
712 |   },
713 | 
714 | 
715 |   /*
716 |   |-----------------------------------------------------------------------------
717 |   | Z-index                                https://tailwindcss.com/docs/z-index
718 |   |-----------------------------------------------------------------------------
719 |   |
720 |   | Here is where you define your z-index utility values. By default we
721 |   | provide a sensible numeric scale. You can, of course, modify these
722 |   | values as needed.
723 |   |
724 |   | Class name: .z-{index}
725 |   |
726 |   */
727 | 
728 |   zIndex: {
729 |     'auto': 'auto',
730 |     '0': 0,
731 |     '10': 10,
732 |     '20': 20,
733 |     '30': 30,
734 |     '40': 40,
735 |     '50': 50,
736 |   },
737 | 
738 | 
739 |   /*
740 |   |-----------------------------------------------------------------------------
741 |   | Opacity                                https://tailwindcss.com/docs/opacity
742 |   |-----------------------------------------------------------------------------
743 |   |
744 |   | Here is where you define your opacity utility values. By default we
745 |   | provide a sensible numeric scale. You can, of course, modify these
746 |   | values as needed.
747 |   |
748 |   | Class name: .opacity-{name}
749 |   |
750 |   */
751 | 
752 |   opacity: {
753 |     '0': '0',
754 |     '25': '.25',
755 |     '50': '.5',
756 |     '75': '.75',
757 |     '100': '1',
758 |   },
759 | 
760 | 
761 |   /*
762 |   |-----------------------------------------------------------------------------
763 |   | SVG fill                                   https://tailwindcss.com/docs/svg
764 |   |-----------------------------------------------------------------------------
765 |   |
766 |   | Here is where you define your SVG fill colors. By default we just provide
767 |   | `fill-current` which sets the fill to the current text color. This lets you
768 |   | specify a fill color using existing text color utilities and helps keep the
769 |   | generated CSS file size down.
770 |   |
771 |   | Class name: .fill-{name}
772 |   |
773 |   */
774 | 
775 |   svgFill: {
776 |     'current': 'currentColor',
777 |   },
778 | 
779 | 
780 |   /*
781 |   |-----------------------------------------------------------------------------
782 |   | SVG stroke                                 https://tailwindcss.com/docs/svg
783 |   |-----------------------------------------------------------------------------
784 |   |
785 |   | Here is where you define your SVG stroke colors. By default we just provide
786 |   | `stroke-current` which sets the stroke to the current text color. This lets
787 |   | you specify a stroke color using existing text color utilities and helps
788 |   | keep the generated CSS file size down.
789 |   |
790 |   | Class name: .stroke-{name}
791 |   |
792 |   */
793 | 
794 |   svgStroke: {
795 |     'current': 'currentColor',
796 |   },
797 | 
798 | 
799 |   /*
800 |   |-----------------------------------------------------------------------------
801 |   | Modules                  https://tailwindcss.com/docs/configuration#modules
802 |   |-----------------------------------------------------------------------------
803 |   |
804 |   | Here is where you control which modules are generated and what variants are
805 |   | generated for each of those modules.
806 |   |
807 |   | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover'
808 |   |
809 |   | To disable a module completely, use `false` instead of an array.
810 |   |
811 |   */
812 | 
813 |   modules: {
814 |     appearance: ['responsive'],
815 |     backgroundAttachment: ['responsive'],
816 |     backgroundColors: ['responsive', 'hover'],
817 |     backgroundPosition: ['responsive'],
818 |     backgroundRepeat: ['responsive'],
819 |     backgroundSize: ['responsive'],
820 |     borderColors: ['responsive', 'hover'],
821 |     borderRadius: ['responsive'],
822 |     borderStyle: ['responsive'],
823 |     borderWidths: ['responsive'],
824 |     cursor: ['responsive'],
825 |     display: ['responsive'],
826 |     flexbox: ['responsive'],
827 |     float: ['responsive'],
828 |     fonts: ['responsive'],
829 |     fontWeights: ['responsive', 'hover'],
830 |     height: ['responsive'],
831 |     leading: ['responsive'],
832 |     lists: ['responsive'],
833 |     margin: ['responsive'],
834 |     maxHeight: ['responsive'],
835 |     maxWidth: ['responsive'],
836 |     minHeight: ['responsive'],
837 |     minWidth: ['responsive'],
838 |     negativeMargin: ['responsive'],
839 |     opacity: ['responsive'],
840 |     overflow: ['responsive'],
841 |     padding: ['responsive'],
842 |     pointerEvents: ['responsive'],
843 |     position: ['responsive'],
844 |     resize: ['responsive'],
845 |     shadows: ['responsive'],
846 |     svgFill: [],
847 |     svgStroke: [],
848 |     textAlign: ['responsive'],
849 |     textColors: ['responsive', 'hover'],
850 |     textSizes: ['responsive'],
851 |     textStyle: ['responsive', 'hover'],
852 |     tracking: ['responsive'],
853 |     userSelect: ['responsive'],
854 |     verticalAlign: ['responsive'],
855 |     visibility: ['responsive'],
856 |     whitespace: ['responsive'],
857 |     width: ['responsive'],
858 |     zIndex: ['responsive'],
859 |   },
860 | 
861 | 
862 |   /*
863 |   |-----------------------------------------------------------------------------
864 |   | Advanced Options         https://tailwindcss.com/docs/configuration#options
865 |   |-----------------------------------------------------------------------------
866 |   |
867 |   | Here is where you can tweak advanced configuration options. We recommend
868 |   | leaving these options alone unless you absolutely need to change them.
869 |   |
870 |   */
871 | 
872 |   options: {
873 |     prefix: '',
874 |     important: false,
875 |     separator: ':',
876 |   },
877 | 
878 | }
879 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
1 | let mix = require('laravel-mix');
2 | var tailwindcss = require('tailwindcss');
3 | 
4 | mix.copy('src/index.html', 'dist/')
5 | .postCss('src/main.css', 'dist/', [
6 |     tailwindcss('tailwind.js'),
7 | ]);


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