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