├── acf-json └── .gitkeep ├── partials └── .gitkeep ├── src ├── img │ └── .gitkeep ├── fonts │ └── .gitkeep ├── js │ ├── components │ │ └── .gitkeep │ ├── utilities │ │ └── .gitkeep │ └── app.js ├── scss │ ├── components │ │ ├── .gitkeep │ │ └── components.tw.scss │ ├── elements │ │ └── .gitkeep │ ├── objects │ │ └── .gitkeep │ ├── utils │ │ └── utils.all.scss │ ├── generic │ │ └── generic.reset.scss │ └── app.scss └── tailwind-config.js ├── shortcodes └── .gitkeep ├── functions ├── custom │ └── .gitkeep ├── plugin │ ├── .gitkeep │ └── yoast-seo.php ├── core │ ├── add-image-sizes.php │ ├── remove-json-api-scripts.php │ ├── remove-wp-embed.php │ ├── add-svg-upload-support.php │ ├── add-vcard-support.php │ ├── remove-default-editor.php │ ├── remove-gutenberg-styles.php │ ├── remove-wp-xml-scripts.php │ ├── remove-emoji-scripts.php │ └── add-editor-formats.php ├── template │ ├── pretty-print.php │ ├── get-file-type.php │ ├── limit-chars.php │ ├── check-if-ajax.php │ ├── limit-words.php │ ├── slugify.php │ └── get-template-partial.php └── required.php ├── includes ├── header.php ├── meta.php └── footer.php ├── screenshot.png ├── screenshot-small.png ├── .prettierrc ├── style.css ├── .gitignore ├── package.json ├── index.php ├── 404.php ├── functions.php ├── page.php ├── readme.md └── webpack.mix.js /acf-json/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /partials/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/img/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /shortcodes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/custom/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/plugin/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/fonts/.gitkeep: -------------------------------------------------------------------------------- 1 | .gitkeep -------------------------------------------------------------------------------- /src/js/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/elements/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/objects/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/js/utilities/.gitkeep: -------------------------------------------------------------------------------- 1 | .gitkeep -------------------------------------------------------------------------------- /src/scss/utils/utils.all.scss: -------------------------------------------------------------------------------- 1 | @tailwind utilities; -------------------------------------------------------------------------------- /src/scss/generic/generic.reset.scss: -------------------------------------------------------------------------------- 1 | @tailwind preflight; -------------------------------------------------------------------------------- /src/scss/components/components.tw.scss: -------------------------------------------------------------------------------- 1 | @tailwind components; -------------------------------------------------------------------------------- /includes/header.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack-pallot/dogpatch/HEAD/screenshot.png -------------------------------------------------------------------------------- /screenshot-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jack-pallot/dogpatch/HEAD/screenshot-small.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "semi": false, 5 | "singleQuote": true, 6 | "trailingComma": "all" 7 | } -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | App.js 3 | ========================================================================== */ -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: dogpatch 3 | Author: Jack Pallot 4 | Author URI: https://github.com/jack-pallot 5 | Version: 0.0.2 6 | Description: A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS. 7 | */ -------------------------------------------------------------------------------- /functions/core/add-image-sizes.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/core/remove-json-api-scripts.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/core/remove-wp-embed.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/template/pretty-print.php: -------------------------------------------------------------------------------- 1 | '; 8 | print_r($str); 9 | echo ''; 10 | }; 11 | ?> -------------------------------------------------------------------------------- /includes/meta.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
-------------------------------------------------------------------------------- /functions/core/add-svg-upload-support.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/plugin/yoast-seo.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/core/add-vcard-support.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/core/remove-default-editor.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/template/get-file-type.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /includes/footer.php: -------------------------------------------------------------------------------- 1 |
2 |

3 | 7 | github.com/jack-pallot/dogpatch 8 | 9 |

10 |
11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /functions/core/remove-gutenberg-styles.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/template/limit-chars.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/template/check-if-ajax.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/core/remove-wp-xml-scripts.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/core/remove-emoji-scripts.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/template/limit-words.php: -------------------------------------------------------------------------------- 1 | $limit) { 8 | $words = str_word_count($text, 2); 9 | $pos = array_keys($words); 10 | $text = substr($text, 0, $pos[$limit]) . $after; 11 | }; 12 | return $text; 13 | }; 14 | ?> -------------------------------------------------------------------------------- /functions/required.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /functions/template/slugify.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled directories 2 | dist 3 | 4 | # System files 5 | *~ 6 | .DS_Store 7 | .svn 8 | .cvs 9 | *.bak 10 | *.swp 11 | Thumbs.db 12 | todo.txt 13 | 14 | # Logs 15 | logs 16 | *.log 17 | npm-debug.log* 18 | 19 | # Dependency directories 20 | node_modules 21 | jspm_packages 22 | mix-manifest.json 23 | 24 | # Optional npm cache directory 25 | .npm 26 | 27 | # Misc 28 | hot 29 | mix-manifest.json 30 | 31 | # Optional REPL history 32 | .node_repl_history 33 | 34 | # Large / disallowed file types 35 | *.hqx 36 | *.bin 37 | *.exe 38 | *.dll 39 | *.deb 40 | *.dmg 41 | *.iso 42 | *.img 43 | *.msi 44 | *.msp 45 | *.msm 46 | *.mid 47 | *.midi 48 | *.kar 49 | *.mp3 50 | *.ogg 51 | *.m4a 52 | *.ra 53 | *.3gpp 54 | *.3gp 55 | *.mp4 56 | *.mpeg 57 | *.mpg 58 | *.mov 59 | *.webm 60 | *.flv 61 | *.m4v 62 | *.mng 63 | *.asx 64 | *.asf 65 | *.wmv 66 | *.avi -------------------------------------------------------------------------------- /functions/core/add-editor-formats.php: -------------------------------------------------------------------------------- 1 | 'Heading XXL', 19 | 'block' => 'span', 20 | 'classes' => 'u-heading--xxl', 21 | 'wrapper' => true, 22 | ) 23 | ); 24 | // Insert the array, JSON ENCODED, into 'style_formats' 25 | $init_array['style_formats'] = json_encode( $style_formats ); 26 | return $init_array; 27 | }; 28 | 29 | // Attach callback to 'tiny_mce_before_init' 30 | add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' ); 31 | ?> -------------------------------------------------------------------------------- /src/scss/app.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Generic 3 | - Low-specificity, far-reaching rulesets like CSS resets 4 | ========================================================================== */ 5 | @import "/generic/generic.reset.scss"; 6 | 7 | /* ========================================================================== 8 | Elements 9 | - Unclassed HTML elements (p, h1 etc) 10 | ========================================================================== */ 11 | 12 | /* ========================================================================== 13 | Objects 14 | - Unstyled / Design-free objects, abstractions and patterns 15 | ========================================================================== */ 16 | 17 | /* ========================================================================== 18 | Components 19 | - Components and widgets 20 | ========================================================================== */ 21 | @import "/components/components.tw.scss"; 22 | 23 | /* ========================================================================== 24 | Utilities 25 | - Helper classes and overrides 26 | ========================================================================== */ 27 | @import "/utils/utils.all.scss"; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dogpatch", 3 | "version": "1.0.0", 4 | "description": "A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS.", 5 | "author": { 6 | "name": "Jack Pallot", 7 | "url": "https://github.com/jack-pallot" 8 | }, 9 | "license": "GNU General Public License v3.0", 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/jack-pallot/dogpatch.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/jack-pallot/dogpatch/issues" 16 | }, 17 | "homepage": "https://github.com/jack-pallot/dogpatch", 18 | "scripts": { 19 | "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 20 | "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 21 | "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 22 | "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 23 | }, 24 | "devDependencies": { 25 | "browser-sync": "^2.24.6", 26 | "browser-sync-webpack-plugin": "^2.2.2", 27 | "glob-all": "^3.1.0", 28 | "laravel-mix": "^2.1.11", 29 | "purgecss-webpack-plugin": "^1.2.0", 30 | "tailwindcss": "^0.6.4" 31 | }, 32 | "dependencies": { 33 | "axios": "^0.19.0", 34 | "fstream": "^1.0.12", 35 | "js-yaml": "^3.13.1", 36 | "tailwindcss-accessibility": "^1.0.0", 37 | "vue": "^2.5.17" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /functions/template/get-template-partial.php: -------------------------------------------------------------------------------- 1 | $value ) { 11 | if ( is_scalar( $value ) || is_array( $value ) ) { 12 | $cache_args[$key] = $value; 13 | } else if ( is_object( $value ) && method_exists( $value, 'get_id' ) ) { 14 | $cache_args[$key] = call_user_method( 'get_id', $value ); 15 | } 16 | } 17 | if ( ( $cache = wp_cache_get( $file, serialize( $cache_args ) ) ) !== false ) { 18 | if ( ! empty( $template_args['return'] ) ) 19 | return $cache; 20 | echo $cache; 21 | return; 22 | } 23 | } 24 | $file_handle = $file; 25 | do_action( 'start_operation', 'get_template_partial::' . $file_handle ); 26 | if ( file_exists( get_stylesheet_directory() . '/' . $file . '.php' ) ) 27 | $file = get_stylesheet_directory() . '/' . $file . '.php'; 28 | elseif ( file_exists( get_template_directory() . '/' . $file . '.php' ) ) 29 | $file = get_template_directory() . '/' . $file . '.php'; 30 | ob_start(); 31 | $return = require( $file ); 32 | $data = ob_get_clean(); 33 | do_action( 'end_operation', 'get_template_partial::' . $file_handle ); 34 | if ( $cache_args ) { 35 | wp_cache_set( $file, $data, serialize( $cache_args ), 3600 ); 36 | } 37 | if ( ! empty( $template_args['return'] ) ) 38 | if ( $return === false ) 39 | return false; 40 | else 41 | return $data; 42 | echo $data; 43 | }; 44 | ?> -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | Index 7 |
8 | 9 | -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 404 7 |
8 | 9 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | Page 7 |
8 | 9 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Dogpatch 2 | 3 | ### A WordPress starter theme including Webpack (via Laravel Mix), Vue, Babel and Tailwind CSS. 4 | 5 | ---------- 6 | 7 | ## Inside Dogpatch 8 | 9 | ### Javascript 10 | 11 | * A Webpack build system via Laravel Mix 12 | * Babel and ES Next support 13 | * ES2015 module support 14 | * Support for VueJS and Vue single file components 15 | * Build scripts - minifying, concatenation and renaming 16 | * Hot module reloading 17 | * Prettier config (can be adjusted if you prefer tabs over spaces) 18 | 19 | ## CSS 20 | * Support for Sass 21 | * ITCSS directory structure for your Sass files 22 | * Zero setup Tailwind CSS framework support 23 | * Accessibility utilities for Tailwind CSS 24 | * Purge CSS to eliminate dead code (HTML, PHP, JS and Vue files) 25 | 26 | ## WordPress 27 | * Optional helper functions for cleaning up WordPress, improving the core functionality and template utilities. Functions can be commented out and don't run by default 28 | * Component inheritance using the get_template_partial() function - letting you pass in props to a PHP template for DRY templating 29 | * .gitignore file with common patterns 30 | 31 | ---------- 32 | 33 | ## Getting Started 34 | 35 | ### Installing 36 | Download the ZIP or clone the repository into your WordPress themes directory. 37 | 38 | `$ cd` into the Dogpatch theme directory. 39 | 40 | **Install the project dependencies using NPM or Yarn:** 41 | 42 | 
npm install
43 | 
yarn install
44 | 45 | - Amend the webpack.mix.js file with your settings. 46 | - Amend the src/tailwind.config.js file with your custom CSS classes. 47 | 48 | ⚠️ You will likely want to remove any references of Dogpatch and replace them with your current project name instead. ⚠️ 49 | 50 | * Rename the theme folder 51 | * Amend the settings in style.css 52 | * Adjust the screenshots to your design 53 | 54 | ### Development 55 | 56 | **To run a single instance of the dev build:** 57 | 58 | 
npm run dev
59 | 
yarn run dev
60 | 61 | **To watch files through with live browser reloading:** 62 | 63 | 
npm run watch
64 | 
yarn run watch
65 | 66 | ### Hot Module Reloading 67 | 68 | **Hot module reloading is possible using the following:** 69 | 70 | 
npm run hot
71 | 
yarn run hot
72 | 73 | ### Production 74 | 75 | **Building for production will run the following tasks:** 76 | 77 | * Convert ES Next using Babel 78 | * Minify and concat Sass and JS files 79 | * Run PurgeCSS to eliminate dead code 80 | * Auto-prefix 81 | * Move to /dist directory 82 | 83 | 
npm run production
84 | 
yarn run production
85 | 86 | ---------- 87 | 88 | ## Updating 89 | 90 | **0.0.2** 91 | Two new functions added: 92 | 93 | remove-gutenberg-styles.php - removes Gutenberg block editor styles 94 | pretty-print.php - nicer formatting on nested print statements with print_p() 95 | 96 | Copy new files from /functions/core and /functions/template and copy functions.php. Comment out as needed. 97 | 98 | ---------- 99 | No auto-updates through WordPress or child themes. These methods tend to cause behind the scenes conflicts and often cause more problems than they solve. Instead you can choose to patch the areas manually if you wish to do so, however, the benefit of being clean-slate means that updates should only require only minor changes. 100 | 101 | ---------- 102 | 103 | ## Todo 104 | 105 | - Look at extracting Tailwind somehow as an optional dependency 106 | - Built in linting using ES Lint 107 | - Built in testing using Vue Testing Tools and either Mocha or Jest. 108 | 109 | ---------- 110 | 111 | ## License 112 | [GNU General Public License v3.0](https://choosealicense.com/licenses/lgpl-3.0/) -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | const mix = require('laravel-mix') 2 | const tailwindcss = require('tailwindcss') 3 | const glob = require('glob-all') 4 | const PurgecssPlugin = require('purgecss-webpack-plugin') 5 | 6 | /* ========================================================================== 7 | Config 8 | ========================================================================== */ 9 | const config = { 10 | siteUrl: 'dogpatchdev.test', 11 | proxyUrl: 'https://dogpatchdev.test', 12 | port: 3000, 13 | openOnStart: false, 14 | pathToLocalSSLCert: '', 15 | pathToLocalSSLKey: '', 16 | filesToWatch: [ 17 | './**/*.php', 18 | './**/*.html', 19 | 'src/scss/**/*.scss', 20 | 'src/js/**/*.js', 21 | 'src/img/*', 22 | 'src/js/components/**/*.vue', 23 | 'src/tailwind-config.js', 24 | ] 25 | } 26 | 27 | /* ========================================================================== 28 | Purge CSS Extractors 29 | ========================================================================== */ 30 | class TailwindExtractor { 31 | static extract(content) { 32 | return content.match(/[A-z0-9-:\/]+/g) || [] 33 | } 34 | } 35 | 36 | /* ========================================================================== 37 | Laravel Mix Config 38 | ========================================================================== */ 39 | mix 40 | // handle JS files 41 | .js('src/js/app.js', 'dist/js/bundle.min.js') 42 | .disableNotifications() 43 | 44 | // Sass files and Tailwind CSS Config 45 | .sass('src/scss/app.scss', 'dist/css/bundle.min.css') 46 | .disableNotifications() 47 | .options({ 48 | processCssUrls: false, 49 | postCss: [tailwindcss('src/tailwind-config.js')], 50 | autoprefixer: { 51 | options: { 52 | browsers: ['last 10 versions'], 53 | }, 54 | }, 55 | }) 56 | 57 | // Move images to dist directory 58 | .copyDirectory('src/img', 'dist/img') 59 | 60 | // Move fonts to dist directory 61 | .copyDirectory('src/fonts', 'dist/fonts') 62 | 63 | // BrowserSync 64 | .browserSync({ 65 | proxy: config.proxyUrl, 66 | host: config.siteUrl, 67 | open: config.openOnStart, 68 | port: config.port, 69 | https: { 70 | key: config.pathToLocalSSLKey, 71 | cert: config.pathToLocalSSLCert 72 | }, 73 | files: config.filesToWatch 74 | }) 75 | 76 | // remove unused CSS from files - only used when running npm run production 77 | if (mix.inProduction()) { 78 | mix.options({ 79 | uglify: { 80 | uglifyOptions: { 81 | mangle: true, 82 | 83 | compress: { 84 | warnings: false, // Suppress uglification warnings 85 | pure_getters: true, 86 | conditionals: true, 87 | unused: true, 88 | comparisons: true, 89 | sequences: true, 90 | dead_code: true, 91 | evaluate: true, 92 | if_return: true, 93 | join_vars: true, 94 | }, 95 | 96 | output: { 97 | comments: false, 98 | }, 99 | 100 | exclude: [/\.min\.js$/gi], // skip pre-minified libs 101 | }, 102 | }, 103 | }) 104 | 105 | // Purge CSS config 106 | // more examples can be found at https://gist.github.com/jack-pallot/217a5d172ffa43c8c85df2cb41b80bad 107 | mix.webpackConfig({ 108 | plugins: [ 109 | new PurgecssPlugin({ 110 | paths: glob.sync([ 111 | path.join(__dirname, './**/*.php'), 112 | path.join(__dirname, 'src/js/**/*.js'), 113 | path.join(__dirname, 'src/js/components/**/*.vue'), 114 | ]), 115 | 116 | extractors: [ 117 | { 118 | extractor: TailwindExtractor, 119 | extensions: ['html', 'php', 'js', 'vue'], 120 | }, 121 | ], 122 | 123 | whitelist: [ 124 | 'p', 125 | 'h1', 126 | 'h2', 127 | 'h3', 128 | 'h4', 129 | 'h5', 130 | 'h6', 131 | 'hr', 132 | 'ol', 133 | 'ol li', 134 | 'ul', 135 | 'ul li', 136 | 'em', 137 | 'b', 138 | 'strong', 139 | 'blockquote', 140 | ], 141 | 142 | whitelistPatterns: [], 143 | }), 144 | ], 145 | }) 146 | } 147 | -------------------------------------------------------------------------------- /src/tailwind-config.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 | | Background sizes https://tailwindcss.com/docs/background-size 366 | |----------------------------------------------------------------------------- 367 | | 368 | | Here is where you define your background sizes. We provide some common 369 | | values that are useful in most projects, but feel free to add other sizes 370 | | that are specific to your project here as well. 371 | | 372 | | Class name: .bg-{size} 373 | | 374 | */ 375 | 376 | backgroundSize: { 377 | 'auto': 'auto', 378 | 'cover': 'cover', 379 | 'contain': 'contain', 380 | }, 381 | 382 | 383 | /* 384 | |----------------------------------------------------------------------------- 385 | | Border widths https://tailwindcss.com/docs/border-width 386 | |----------------------------------------------------------------------------- 387 | | 388 | | Here is where you define your border widths. Take note that border 389 | | widths require a special "default" value set as well. This is the 390 | | width that will be used when you do not specify a border width. 391 | | 392 | | Class name: .border{-side?}{-width?} 393 | | 394 | */ 395 | 396 | borderWidths: { 397 | default: '1px', 398 | '0': '0', 399 | '2': '2px', 400 | '4': '4px', 401 | '8': '8px', 402 | }, 403 | 404 | 405 | /* 406 | |----------------------------------------------------------------------------- 407 | | Border colors https://tailwindcss.com/docs/border-color 408 | |----------------------------------------------------------------------------- 409 | | 410 | | Here is where you define your border colors. By default these use the 411 | | color palette we defined above, however you're welcome to set these 412 | | independently if that makes sense for your project. 413 | | 414 | | Take note that border colors require a special "default" value set 415 | | as well. This is the color that will be used when you do not 416 | | specify a border color. 417 | | 418 | | Class name: .border-{color} 419 | | 420 | */ 421 | 422 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 423 | 424 | 425 | /* 426 | |----------------------------------------------------------------------------- 427 | | Border radius https://tailwindcss.com/docs/border-radius 428 | |----------------------------------------------------------------------------- 429 | | 430 | | Here is where you define your border radius values. If a `default` radius 431 | | is provided, it will be made available as the non-suffixed `.rounded` 432 | | utility. 433 | | 434 | | If your scale includes a `0` value to reset already rounded corners, it's 435 | | a good idea to put it first so other values are able to override it. 436 | | 437 | | Class name: .rounded{-side?}{-size?} 438 | | 439 | */ 440 | 441 | borderRadius: { 442 | 'none': '0', 443 | 'sm': '.125rem', 444 | default: '.25rem', 445 | 'lg': '.5rem', 446 | 'full': '9999px', 447 | }, 448 | 449 | 450 | /* 451 | |----------------------------------------------------------------------------- 452 | | Width https://tailwindcss.com/docs/width 453 | |----------------------------------------------------------------------------- 454 | | 455 | | Here is where you define your width utility sizes. These can be 456 | | percentage based, pixels, rems, or any other units. By default 457 | | we provide a sensible rem based numeric scale, a percentage 458 | | based fraction scale, plus some other common use-cases. You 459 | | can, of course, modify these values as needed. 460 | | 461 | | 462 | | It's also worth mentioning that Tailwind automatically escapes 463 | | invalid CSS class name characters, which allows you to have 464 | | awesome classes like .w-2/3. 465 | | 466 | | Class name: .w-{size} 467 | | 468 | */ 469 | 470 | width: { 471 | 'auto': 'auto', 472 | 'px': '1px', 473 | '1': '0.25rem', 474 | '2': '0.5rem', 475 | '3': '0.75rem', 476 | '4': '1rem', 477 | '5': '1.25rem', 478 | '6': '1.5rem', 479 | '8': '2rem', 480 | '10': '2.5rem', 481 | '12': '3rem', 482 | '16': '4rem', 483 | '24': '6rem', 484 | '32': '8rem', 485 | '48': '12rem', 486 | '64': '16rem', 487 | '1/2': '50%', 488 | '1/3': '33.33333%', 489 | '2/3': '66.66667%', 490 | '1/4': '25%', 491 | '3/4': '75%', 492 | '1/5': '20%', 493 | '2/5': '40%', 494 | '3/5': '60%', 495 | '4/5': '80%', 496 | '1/6': '16.66667%', 497 | '5/6': '83.33333%', 498 | 'full': '100%', 499 | 'screen': '100vw' 500 | }, 501 | 502 | 503 | /* 504 | |----------------------------------------------------------------------------- 505 | | Height https://tailwindcss.com/docs/height 506 | |----------------------------------------------------------------------------- 507 | | 508 | | Here is where you define your height utility sizes. These can be 509 | | percentage based, pixels, rems, or any other units. By default 510 | | we provide a sensible rem based numeric scale plus some other 511 | | common use-cases. You can, of course, modify these values as 512 | | needed. 513 | | 514 | | Class name: .h-{size} 515 | | 516 | */ 517 | 518 | height: { 519 | 'auto': 'auto', 520 | 'px': '1px', 521 | '1': '0.25rem', 522 | '2': '0.5rem', 523 | '3': '0.75rem', 524 | '4': '1rem', 525 | '5': '1.25rem', 526 | '6': '1.5rem', 527 | '8': '2rem', 528 | '10': '2.5rem', 529 | '12': '3rem', 530 | '16': '4rem', 531 | '24': '6rem', 532 | '32': '8rem', 533 | '48': '12rem', 534 | '64': '16rem', 535 | 'full': '100%', 536 | 'screen': '100vh' 537 | }, 538 | 539 | 540 | /* 541 | |----------------------------------------------------------------------------- 542 | | Minimum width https://tailwindcss.com/docs/min-width 543 | |----------------------------------------------------------------------------- 544 | | 545 | | Here is where you define your minimum width utility sizes. These can 546 | | be percentage based, pixels, rems, or any other units. We provide a 547 | | couple common use-cases by default. You can, of course, modify 548 | | these values as needed. 549 | | 550 | | Class name: .min-w-{size} 551 | | 552 | */ 553 | 554 | minWidth: { 555 | '0': '0', 556 | 'full': '100%', 557 | }, 558 | 559 | 560 | /* 561 | |----------------------------------------------------------------------------- 562 | | Minimum height https://tailwindcss.com/docs/min-height 563 | |----------------------------------------------------------------------------- 564 | | 565 | | Here is where you define your minimum height utility sizes. These can 566 | | be percentage based, pixels, rems, or any other units. We provide a 567 | | few common use-cases by default. You can, of course, modify these 568 | | values as needed. 569 | | 570 | | Class name: .min-h-{size} 571 | | 572 | */ 573 | 574 | minHeight: { 575 | '0': '0', 576 | 'full': '100%', 577 | 'screen': '100vh' 578 | }, 579 | 580 | 581 | /* 582 | |----------------------------------------------------------------------------- 583 | | Maximum width https://tailwindcss.com/docs/max-width 584 | |----------------------------------------------------------------------------- 585 | | 586 | | Here is where you define your maximum width utility sizes. These can 587 | | be percentage based, pixels, rems, or any other units. By default 588 | | we provide a sensible rem based scale and a "full width" size, 589 | | which is basically a reset utility. You can, of course, 590 | | modify these values as needed. 591 | | 592 | | Class name: .max-w-{size} 593 | | 594 | */ 595 | 596 | maxWidth: { 597 | 'xs': '20rem', 598 | 'sm': '30rem', 599 | 'md': '40rem', 600 | 'lg': '50rem', 601 | 'xl': '60rem', 602 | '2xl': '70rem', 603 | '3xl': '80rem', 604 | '4xl': '90rem', 605 | '5xl': '100rem', 606 | 'full': '100%', 607 | }, 608 | 609 | 610 | /* 611 | |----------------------------------------------------------------------------- 612 | | Maximum height https://tailwindcss.com/docs/max-height 613 | |----------------------------------------------------------------------------- 614 | | 615 | | Here is where you define your maximum height utility sizes. These can 616 | | be percentage based, pixels, rems, or any other units. We provide a 617 | | couple common use-cases by default. You can, of course, modify 618 | | these values as needed. 619 | | 620 | | Class name: .max-h-{size} 621 | | 622 | */ 623 | 624 | maxHeight: { 625 | 'full': '100%', 626 | 'screen': '100vh', 627 | }, 628 | 629 | 630 | /* 631 | |----------------------------------------------------------------------------- 632 | | Padding https://tailwindcss.com/docs/padding 633 | |----------------------------------------------------------------------------- 634 | | 635 | | Here is where you define your padding utility sizes. These can be 636 | | percentage based, pixels, rems, or any other units. By default we 637 | | provide a sensible rem based numeric scale plus a couple other 638 | | common use-cases like "1px". You can, of course, modify these 639 | | values as needed. 640 | | 641 | | Class name: .p{side?}-{size} 642 | | 643 | */ 644 | 645 | padding: { 646 | 'px': '1px', 647 | '0': '0', 648 | '1': '0.25rem', 649 | '2': '0.5rem', 650 | '3': '0.75rem', 651 | '4': '1rem', 652 | '5': '1.25rem', 653 | '6': '1.5rem', 654 | '8': '2rem', 655 | '10': '2.5rem', 656 | '12': '3rem', 657 | '16': '4rem', 658 | '20': '5rem', 659 | '24': '6rem', 660 | '32': '8rem', 661 | }, 662 | 663 | 664 | /* 665 | |----------------------------------------------------------------------------- 666 | | Margin https://tailwindcss.com/docs/margin 667 | |----------------------------------------------------------------------------- 668 | | 669 | | Here is where you define your margin utility sizes. These can be 670 | | percentage based, pixels, rems, or any other units. By default we 671 | | provide a sensible rem based numeric scale plus a couple other 672 | | common use-cases like "1px". You can, of course, modify these 673 | | values as needed. 674 | | 675 | | Class name: .m{side?}-{size} 676 | | 677 | */ 678 | 679 | margin: { 680 | 'auto': 'auto', 681 | 'px': '1px', 682 | '0': '0', 683 | '1': '0.25rem', 684 | '2': '0.5rem', 685 | '3': '0.75rem', 686 | '4': '1rem', 687 | '5': '1.25rem', 688 | '6': '1.5rem', 689 | '8': '2rem', 690 | '10': '2.5rem', 691 | '12': '3rem', 692 | '16': '4rem', 693 | '20': '5rem', 694 | '24': '6rem', 695 | '32': '8rem', 696 | }, 697 | 698 | 699 | /* 700 | |----------------------------------------------------------------------------- 701 | | Negative margin https://tailwindcss.com/docs/negative-margin 702 | |----------------------------------------------------------------------------- 703 | | 704 | | Here is where you define your negative margin utility sizes. These can 705 | | be percentage based, pixels, rems, or any other units. By default we 706 | | provide matching values to the padding scale since these utilities 707 | | generally get used together. You can, of course, modify these 708 | | values as needed. 709 | | 710 | | Class name: .-m{side?}-{size} 711 | | 712 | */ 713 | 714 | negativeMargin: { 715 | 'px': '1px', 716 | '0': '0', 717 | '1': '0.25rem', 718 | '2': '0.5rem', 719 | '3': '0.75rem', 720 | '4': '1rem', 721 | '5': '1.25rem', 722 | '6': '1.5rem', 723 | '8': '2rem', 724 | '10': '2.5rem', 725 | '12': '3rem', 726 | '16': '4rem', 727 | '20': '5rem', 728 | '24': '6rem', 729 | '32': '8rem', 730 | }, 731 | 732 | 733 | /* 734 | |----------------------------------------------------------------------------- 735 | | Shadows https://tailwindcss.com/docs/shadows 736 | |----------------------------------------------------------------------------- 737 | | 738 | | Here is where you define your shadow utilities. As you can see from 739 | | the defaults we provide, it's possible to apply multiple shadows 740 | | per utility using comma separation. 741 | | 742 | | If a `default` shadow is provided, it will be made available as the non- 743 | | suffixed `.shadow` utility. 744 | | 745 | | Class name: .shadow-{size?} 746 | | 747 | */ 748 | 749 | shadows: { 750 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 751 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 752 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 753 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 754 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 755 | 'none': 'none', 756 | }, 757 | 758 | 759 | /* 760 | |----------------------------------------------------------------------------- 761 | | Z-index https://tailwindcss.com/docs/z-index 762 | |----------------------------------------------------------------------------- 763 | | 764 | | Here is where you define your z-index utility values. By default we 765 | | provide a sensible numeric scale. You can, of course, modify these 766 | | values as needed. 767 | | 768 | | Class name: .z-{index} 769 | | 770 | */ 771 | 772 | zIndex: { 773 | 'auto': 'auto', 774 | '0': 0, 775 | '10': 10, 776 | '20': 20, 777 | '30': 30, 778 | '40': 40, 779 | '50': 50, 780 | }, 781 | 782 | 783 | /* 784 | |----------------------------------------------------------------------------- 785 | | Opacity https://tailwindcss.com/docs/opacity 786 | |----------------------------------------------------------------------------- 787 | | 788 | | Here is where you define your opacity utility values. By default we 789 | | provide a sensible numeric scale. You can, of course, modify these 790 | | values as needed. 791 | | 792 | | Class name: .opacity-{name} 793 | | 794 | */ 795 | 796 | opacity: { 797 | '0': '0', 798 | '25': '.25', 799 | '50': '.5', 800 | '75': '.75', 801 | '100': '1', 802 | }, 803 | 804 | 805 | /* 806 | |----------------------------------------------------------------------------- 807 | | SVG fill https://tailwindcss.com/docs/svg 808 | |----------------------------------------------------------------------------- 809 | | 810 | | Here is where you define your SVG fill colors. By default we just provide 811 | | `fill-current` which sets the fill to the current text color. This lets you 812 | | specify a fill color using existing text color utilities and helps keep the 813 | | generated CSS file size down. 814 | | 815 | | Class name: .fill-{name} 816 | | 817 | */ 818 | 819 | svgFill: { 820 | 'current': 'currentColor', 821 | }, 822 | 823 | 824 | /* 825 | |----------------------------------------------------------------------------- 826 | | SVG stroke https://tailwindcss.com/docs/svg 827 | |----------------------------------------------------------------------------- 828 | | 829 | | Here is where you define your SVG stroke colors. By default we just provide 830 | | `stroke-current` which sets the stroke to the current text color. This lets 831 | | you specify a stroke color using existing text color utilities and helps 832 | | keep the generated CSS file size down. 833 | | 834 | | Class name: .stroke-{name} 835 | | 836 | */ 837 | 838 | svgStroke: { 839 | 'current': 'currentColor', 840 | }, 841 | 842 | 843 | /* 844 | |----------------------------------------------------------------------------- 845 | | Modules https://tailwindcss.com/docs/configuration#modules 846 | |----------------------------------------------------------------------------- 847 | | 848 | | Here is where you control which modules are generated and what variants are 849 | | generated for each of those modules. 850 | | 851 | | Currently supported variants: 852 | | - responsive 853 | | - hover 854 | | - focus 855 | | - active 856 | | - group-hover 857 | | 858 | | To disable a module completely, use `false` instead of an array. 859 | | 860 | */ 861 | 862 | modules: { 863 | appearance: ['responsive'], 864 | backgroundAttachment: ['responsive'], 865 | backgroundColors: ['responsive', 'hover', 'focus'], 866 | backgroundPosition: ['responsive'], 867 | backgroundRepeat: ['responsive'], 868 | backgroundSize: ['responsive'], 869 | borderCollapse: [], 870 | borderColors: ['responsive', 'hover', 'focus'], 871 | borderRadius: ['responsive'], 872 | borderStyle: ['responsive'], 873 | borderWidths: ['responsive'], 874 | cursor: ['responsive'], 875 | display: ['responsive'], 876 | flexbox: ['responsive'], 877 | float: ['responsive'], 878 | fonts: ['responsive'], 879 | fontWeights: ['responsive', 'hover', 'focus'], 880 | height: ['responsive'], 881 | leading: ['responsive'], 882 | lists: ['responsive'], 883 | margin: ['responsive'], 884 | maxHeight: ['responsive'], 885 | maxWidth: ['responsive'], 886 | minHeight: ['responsive'], 887 | minWidth: ['responsive'], 888 | negativeMargin: ['responsive'], 889 | opacity: ['responsive'], 890 | outline: ['focus'], 891 | overflow: ['responsive'], 892 | padding: ['responsive'], 893 | pointerEvents: ['responsive'], 894 | position: ['responsive'], 895 | resize: ['responsive'], 896 | shadows: ['responsive', 'hover', 'focus'], 897 | svgFill: [], 898 | svgStroke: [], 899 | tableLayout: ['responsive'], 900 | textAlign: ['responsive'], 901 | textColors: ['responsive', 'hover', 'focus'], 902 | textSizes: ['responsive'], 903 | textStyle: ['responsive', 'hover', 'focus'], 904 | tracking: ['responsive'], 905 | userSelect: ['responsive'], 906 | verticalAlign: ['responsive'], 907 | visibility: ['responsive'], 908 | whitespace: ['responsive'], 909 | width: ['responsive'], 910 | zIndex: ['responsive'], 911 | }, 912 | 913 | /* 914 | |----------------------------------------------------------------------------- 915 | | Plugins https://tailwindcss.com/docs/plugins 916 | |----------------------------------------------------------------------------- 917 | | 918 | | Here is where you can register any plugins you'd like to use in your 919 | | project. Tailwind's built-in `container` plugin is enabled by default to 920 | | give you a Bootstrap-style responsive container component out of the box. 921 | | 922 | | Be sure to view the complete plugin documentation to learn more about how 923 | | the plugin system works. 924 | | 925 | */ 926 | 927 | plugins: [ 928 | require('tailwindcss-accessibility') 929 | ], 930 | 931 | /* 932 | |----------------------------------------------------------------------------- 933 | | Advanced Options https://tailwindcss.com/docs/configuration#options 934 | |----------------------------------------------------------------------------- 935 | | 936 | | Here is where you can tweak advanced configuration options. We recommend 937 | | leaving these options alone unless you absolutely need to change them. 938 | | 939 | */ 940 | 941 | options: { 942 | prefix: '', 943 | important: false, 944 | separator: ':', 945 | }, 946 | 947 | } --------------------------------------------------------------------------------