├── .eslintrc ├── .gitignore ├── README.md ├── config-overrides.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── tailwind.js └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "globals": { 4 | "tw": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Tailwind Emotion Starter 2 | 3 | This project is based on [create-react-app](https://github.com/facebook/create-react-app). 4 | 5 | ## Usage 6 | 7 | ``` 8 | git clone https://github.com/muhajirframe/react-tailwind-emotion-starter 9 | cd react-tailwidn-emotion-starter 10 | ``` 11 | 12 | ### Development 13 | 14 | ``` 15 | npm start 16 | ``` 17 | 18 | ### Build 19 | 20 | ``` 21 | npm run build 22 | ``` 23 | 24 | ## How it was made? 25 | - It uses [babel-plugin-tailwind-components](https://github.com/bradlc/babel-plugin-tailwind-components) 26 | - Add globals to eslint. So we can use `tw` globally. 27 | - tailwind configuration is located in `src/tailwind.js`. Because `create-react-app` doesn't support importing file from outside `src` 28 | 29 | ## For more information 30 | 31 | - [Create React App](https://github.com/facebook/create-react-app) 32 | 33 | ## Contributing 34 | 35 | - Got a question? [Submit an issue](https://github.com/muhajirframe/react-tailwind-emotion-starter/issues/new) 36 | - Make a pull request 37 | 38 | ## Related 39 | 40 | - (vscode-tailwind-styled-snippets)[https://github.com/muhajirframe/vscode-tailwind-styled-snippets]. If you're a Visual Studio Code. This plugin will definitely help. It was build with `babel-plugin-tailwind-component` + `react-emotion`/`styled-components` in mind 41 | 42 | **Enjoy!** 43 | -------------------------------------------------------------------------------- /config-overrides.js: -------------------------------------------------------------------------------- 1 | const { injectBabelPlugin } = require("react-app-rewired"); 2 | const rewireEslint = require("react-app-rewire-eslint"); 3 | const tailwind = [ 4 | "tailwind-components", 5 | { 6 | config: "./src/tailwind.js", 7 | format: "auto" 8 | } 9 | ]; 10 | const emotion = ["emotion"]; 11 | module.exports = function override(config, env) { 12 | config = injectBabelPlugin(tailwind, config); 13 | config = injectBabelPlugin(emotion, config); 14 | config = rewireEslint(config, env); 15 | return config; 16 | }; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-tailwind-emotion-starter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "babel-plugin-emotion": "^9.2.11", 7 | "babel-plugin-tailwind-components": "^0.5.10", 8 | "emotion": "^9.2.12", 9 | "react": "^16.5.2", 10 | "react-app-rewire-eslint": "^0.2.3", 11 | "react-dom": "^16.5.2", 12 | "react-emotion": "^9.2.12", 13 | "react-scripts": "2.0.4", 14 | "tailwindcss": "^0.6.6" 15 | }, 16 | "scripts": { 17 | "start": "react-app-rewired start", 18 | "build": "react-app-rewired build", 19 | "test": "react-app-rewired test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ], 31 | "devDependencies": { 32 | "react-app-rewired": "^1.6.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhajirdev/react-tailwind-emotion-starter/98d6607c89ee3bc7a39f57ee1c06af10f6f3f75a/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | } 9 | 10 | .App-header { 11 | background-color: #282c34; 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import styled from "react-emotion"; 5 | 6 | const Button = styled.a` 7 | ${tw`bg-white rounded-lg no-underline text-black px-8 py-4 text-lg`}; 8 | `; 9 | 10 | const LogoContainers = styled.div` 11 | ${tw`flex`}; 12 | `; 13 | const Logo = styled.img` 14 | ${tw`rounded-full w-64 h-64`}; 15 | `; 16 | const PlusIcon = styled.div` 17 | ${tw`w-64 h-64 flex justify-center items-center`}; 18 | `; 19 | 20 | class App extends Component { 21 | render() { 22 | return ( 23 |
24 |
25 | 26 | 27 | + 28 | 32 | + 33 | 37 | 38 |

React Tailwind Emotion Starter

39 | 42 |
43 |
44 | ); 45 | } 46 | } 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export function register(config) { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Let's check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl, config); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl, config); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl, config) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | 70 | // Execute callback 71 | if (config.onUpdate) { 72 | config.onUpdate(registration); 73 | } 74 | } else { 75 | // At this point, everything has been precached. 76 | // It's the perfect time to display a 77 | // "Content is cached for offline use." message. 78 | console.log('Content is cached for offline use.'); 79 | 80 | // Execute callback 81 | if (config.onSuccess) { 82 | config.onSuccess(registration); 83 | } 84 | } 85 | } 86 | }; 87 | }; 88 | }) 89 | .catch(error => { 90 | console.error('Error during service worker registration:', error); 91 | }); 92 | } 93 | 94 | function checkValidServiceWorker(swUrl, config) { 95 | // Check if the service worker can be found. If it can't reload the page. 96 | fetch(swUrl) 97 | .then(response => { 98 | // Ensure service worker exists, and that we really are getting a JS file. 99 | if ( 100 | response.status === 404 || 101 | response.headers.get('content-type').indexOf('javascript') === -1 102 | ) { 103 | // No service worker found. Probably a different app. Reload the page. 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister().then(() => { 106 | window.location.reload(); 107 | }); 108 | }); 109 | } else { 110 | // Service worker found. Proceed as normal. 111 | registerValidSW(swUrl, config); 112 | } 113 | }) 114 | .catch(() => { 115 | console.log( 116 | 'No internet connection found. App is running in offline mode.' 117 | ); 118 | }); 119 | } 120 | 121 | export function unregister() { 122 | if ('serviceWorker' in navigator) { 123 | navigator.serviceWorker.ready.then(registration => { 124 | registration.unregister(); 125 | }); 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/tailwind.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Tailwind - The Utility-First CSS Framework 4 | 5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), 6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). 7 | 8 | Welcome to the Tailwind config file. This is where you can customize 9 | Tailwind specifically for your project. Don't be intimidated by the 10 | length of this file. It's really just a big JavaScript object and 11 | we've done our very best to explain each section. 12 | 13 | View the full documentation at https://tailwindcss.com. 14 | 15 | 16 | |------------------------------------------------------------------------------- 17 | | The default config 18 | |------------------------------------------------------------------------------- 19 | | 20 | | This variable contains the default Tailwind config. You don't have 21 | | to use it, but it can sometimes be helpful to have available. For 22 | | example, you may choose to merge your custom configuration 23 | | values with some of the Tailwind defaults. 24 | | 25 | */ 26 | 27 | // let defaultConfig = require('tailwindcss/defaultConfig')() 28 | 29 | 30 | /* 31 | |------------------------------------------------------------------------------- 32 | | Colors https://tailwindcss.com/docs/colors 33 | |------------------------------------------------------------------------------- 34 | | 35 | | Here you can specify the colors used in your project. To get you started, 36 | | we've provided a generous palette of great looking colors that are perfect 37 | | for prototyping, but don't hesitate to change them for your project. You 38 | | own these colors, nothing will break if you change everything about them. 39 | | 40 | | We've used literal color names ("red", "blue", etc.) for the default 41 | | palette, but if you'd rather use functional names like "primary" and 42 | | "secondary", or even a numeric scale like "100" and "200", go for it. 43 | | 44 | */ 45 | 46 | let colors = { 47 | 'transparent': 'transparent', 48 | 49 | 'black': '#22292f', 50 | 'grey-darkest': '#3d4852', 51 | 'grey-darker': '#606f7b', 52 | 'grey-dark': '#8795a1', 53 | 'grey': '#b8c2cc', 54 | 'grey-light': '#dae1e7', 55 | 'grey-lighter': '#f1f5f8', 56 | 'grey-lightest': '#f8fafc', 57 | 'white': '#ffffff', 58 | 59 | 'red-darkest': '#3b0d0c', 60 | 'red-darker': '#621b18', 61 | 'red-dark': '#cc1f1a', 62 | 'red': '#e3342f', 63 | 'red-light': '#ef5753', 64 | 'red-lighter': '#f9acaa', 65 | 'red-lightest': '#fcebea', 66 | 67 | 'orange-darkest': '#462a16', 68 | 'orange-darker': '#613b1f', 69 | 'orange-dark': '#de751f', 70 | 'orange': '#f6993f', 71 | 'orange-light': '#faad63', 72 | 'orange-lighter': '#fcd9b6', 73 | 'orange-lightest': '#fff5eb', 74 | 75 | 'yellow-darkest': '#453411', 76 | 'yellow-darker': '#684f1d', 77 | 'yellow-dark': '#f2d024', 78 | 'yellow': '#ffed4a', 79 | 'yellow-light': '#fff382', 80 | 'yellow-lighter': '#fff9c2', 81 | 'yellow-lightest': '#fcfbeb', 82 | 83 | 'green-darkest': '#0f2f21', 84 | 'green-darker': '#1a4731', 85 | 'green-dark': '#1f9d55', 86 | 'green': '#38c172', 87 | 'green-light': '#51d88a', 88 | 'green-lighter': '#a2f5bf', 89 | 'green-lightest': '#e3fcec', 90 | 91 | 'teal-darkest': '#0d3331', 92 | 'teal-darker': '#20504f', 93 | 'teal-dark': '#38a89d', 94 | 'teal': '#4dc0b5', 95 | 'teal-light': '#64d5ca', 96 | 'teal-lighter': '#a0f0ed', 97 | 'teal-lightest': '#e8fffe', 98 | 99 | 'blue-darkest': '#12283a', 100 | 'blue-darker': '#1c3d5a', 101 | 'blue-dark': '#2779bd', 102 | 'blue': '#3490dc', 103 | 'blue-light': '#6cb2eb', 104 | 'blue-lighter': '#bcdefa', 105 | 'blue-lightest': '#eff8ff', 106 | 107 | 'indigo-darkest': '#191e38', 108 | 'indigo-darker': '#2f365f', 109 | 'indigo-dark': '#5661b3', 110 | 'indigo': '#6574cd', 111 | 'indigo-light': '#7886d7', 112 | 'indigo-lighter': '#b2b7ff', 113 | 'indigo-lightest': '#e6e8ff', 114 | 115 | 'purple-darkest': '#21183c', 116 | 'purple-darker': '#382b5f', 117 | 'purple-dark': '#794acf', 118 | 'purple': '#9561e2', 119 | 'purple-light': '#a779e9', 120 | 'purple-lighter': '#d6bbfc', 121 | 'purple-lightest': '#f3ebff', 122 | 123 | 'pink-darkest': '#451225', 124 | 'pink-darker': '#6f213f', 125 | 'pink-dark': '#eb5286', 126 | 'pink': '#f66d9b', 127 | 'pink-light': '#fa7ea8', 128 | 'pink-lighter': '#ffbbca', 129 | 'pink-lightest': '#ffebef', 130 | } 131 | 132 | module.exports = { 133 | 134 | /* 135 | |----------------------------------------------------------------------------- 136 | | Colors https://tailwindcss.com/docs/colors 137 | |----------------------------------------------------------------------------- 138 | | 139 | | The color palette defined above is also assigned to the "colors" key of 140 | | your Tailwind config. This makes it easy to access them in your CSS 141 | | using Tailwind's config helper. For example: 142 | | 143 | | .error { color: config('colors.red') } 144 | | 145 | */ 146 | 147 | colors: colors, 148 | 149 | 150 | /* 151 | |----------------------------------------------------------------------------- 152 | | Screens https://tailwindcss.com/docs/responsive-design 153 | |----------------------------------------------------------------------------- 154 | | 155 | | Screens in Tailwind are translated to CSS media queries. They define the 156 | | responsive breakpoints for your project. By default Tailwind takes a 157 | | "mobile first" approach, where each screen size represents a minimum 158 | | viewport width. Feel free to have as few or as many screens as you 159 | | want, naming them in whatever way you'd prefer for your project. 160 | | 161 | | Tailwind also allows for more complex screen definitions, which can be 162 | | useful in certain situations. Be sure to see the full responsive 163 | | documentation for a complete list of options. 164 | | 165 | | Class name: .{screen}:{utility} 166 | | 167 | */ 168 | 169 | screens: { 170 | 'sm': '576px', 171 | 'md': '768px', 172 | 'lg': '992px', 173 | 'xl': '1200px', 174 | }, 175 | 176 | 177 | /* 178 | |----------------------------------------------------------------------------- 179 | | Fonts https://tailwindcss.com/docs/fonts 180 | |----------------------------------------------------------------------------- 181 | | 182 | | Here is where you define your project's font stack, or font families. 183 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 184 | | If you're using custom fonts you'll need to import them prior to 185 | | defining them here. 186 | | 187 | | By default we provide a native font stack that works remarkably well on 188 | | any device or OS you're using, since it just uses the default fonts 189 | | provided by the platform. 190 | | 191 | | Class name: .font-{name} 192 | | 193 | */ 194 | 195 | fonts: { 196 | 'sans': [ 197 | 'system-ui', 198 | 'BlinkMacSystemFont', 199 | '-apple-system', 200 | 'Segoe UI', 201 | 'Roboto', 202 | 'Oxygen', 203 | 'Ubuntu', 204 | 'Cantarell', 205 | 'Fira Sans', 206 | 'Droid Sans', 207 | 'Helvetica Neue', 208 | 'sans-serif', 209 | ], 210 | 'serif': [ 211 | 'Constantia', 212 | 'Lucida Bright', 213 | 'Lucidabright', 214 | 'Lucida Serif', 215 | 'Lucida', 216 | 'DejaVu Serif', 217 | 'Bitstream Vera Serif', 218 | 'Liberation Serif', 219 | 'Georgia', 220 | 'serif', 221 | ], 222 | 'mono': [ 223 | 'Menlo', 224 | 'Monaco', 225 | 'Consolas', 226 | 'Liberation Mono', 227 | 'Courier New', 228 | 'monospace', 229 | ] 230 | }, 231 | 232 | 233 | /* 234 | |----------------------------------------------------------------------------- 235 | | Text sizes https://tailwindcss.com/docs/text-sizing 236 | |----------------------------------------------------------------------------- 237 | | 238 | | Here is where you define your text sizes. Name these in whatever way 239 | | makes the most sense to you. We use size names by default, but 240 | | you're welcome to use a numeric scale or even something else 241 | | entirely. 242 | | 243 | | By default Tailwind uses the "rem" unit type for most measurements. 244 | | This allows you to set a root font size which all other sizes are 245 | | then based on. That said, you are free to use whatever units you 246 | | prefer, be it rems, ems, pixels or other. 247 | | 248 | | Class name: .text-{size} 249 | | 250 | */ 251 | 252 | textSizes: { 253 | 'xs': '.75rem', // 12px 254 | 'sm': '.875rem', // 14px 255 | 'base': '1rem', // 16px 256 | 'lg': '1.125rem', // 18px 257 | 'xl': '1.25rem', // 20px 258 | '2xl': '1.5rem', // 24px 259 | '3xl': '1.875rem', // 30px 260 | '4xl': '2.25rem', // 36px 261 | '5xl': '3rem', // 48px 262 | }, 263 | 264 | 265 | /* 266 | |----------------------------------------------------------------------------- 267 | | Font weights https://tailwindcss.com/docs/font-weight 268 | |----------------------------------------------------------------------------- 269 | | 270 | | Here is where you define your font weights. We've provided a list of 271 | | common font weight names with their respective numeric scale values 272 | | to get you started. It's unlikely that your project will require 273 | | all of these, so we recommend removing those you don't need. 274 | | 275 | | Class name: .font-{weight} 276 | | 277 | */ 278 | 279 | fontWeights: { 280 | 'hairline': 100, 281 | 'thin': 200, 282 | 'light': 300, 283 | 'normal': 400, 284 | 'medium': 500, 285 | 'semibold': 600, 286 | 'bold': 700, 287 | 'extrabold': 800, 288 | 'black': 900, 289 | }, 290 | 291 | 292 | /* 293 | |----------------------------------------------------------------------------- 294 | | Leading (line height) https://tailwindcss.com/docs/line-height 295 | |----------------------------------------------------------------------------- 296 | | 297 | | Here is where you define your line height values, or as we call 298 | | them in Tailwind, leadings. 299 | | 300 | | Class name: .leading-{size} 301 | | 302 | */ 303 | 304 | leading: { 305 | 'none': 1, 306 | 'tight': 1.25, 307 | 'normal': 1.5, 308 | 'loose': 2, 309 | }, 310 | 311 | 312 | /* 313 | |----------------------------------------------------------------------------- 314 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 315 | |----------------------------------------------------------------------------- 316 | | 317 | | Here is where you define your letter spacing values, or as we call 318 | | them in Tailwind, tracking. 319 | | 320 | | Class name: .tracking-{size} 321 | | 322 | */ 323 | 324 | tracking: { 325 | 'tight': '-0.05em', 326 | 'normal': '0', 327 | 'wide': '0.05em', 328 | }, 329 | 330 | 331 | /* 332 | |----------------------------------------------------------------------------- 333 | | Text colors https://tailwindcss.com/docs/text-color 334 | |----------------------------------------------------------------------------- 335 | | 336 | | Here is where you define your text colors. By default these use the 337 | | color palette we defined above, however you're welcome to set these 338 | | independently if that makes sense for your project. 339 | | 340 | | Class name: .text-{color} 341 | | 342 | */ 343 | 344 | textColors: colors, 345 | 346 | 347 | /* 348 | |----------------------------------------------------------------------------- 349 | | Background colors https://tailwindcss.com/docs/background-color 350 | |----------------------------------------------------------------------------- 351 | | 352 | | Here is where you define your background colors. By default these use 353 | | the color palette we defined above, however you're welcome to set 354 | | these independently if that makes sense for your project. 355 | | 356 | | Class name: .bg-{color} 357 | | 358 | */ 359 | 360 | backgroundColors: colors, 361 | 362 | 363 | /* 364 | |----------------------------------------------------------------------------- 365 | | 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 | |----------------------------------------------------------------------------- 916 | | Plugins https://tailwindcss.com/docs/plugins 917 | |----------------------------------------------------------------------------- 918 | | 919 | | Here is where you can register any plugins you'd like to use in your 920 | | project. Tailwind's built-in `container` plugin is enabled by default to 921 | | give you a Bootstrap-style responsive container component out of the box. 922 | | 923 | | Be sure to view the complete plugin documentation to learn more about how 924 | | the plugin system works. 925 | | 926 | */ 927 | 928 | plugins: [ 929 | require('tailwindcss/plugins/container')({ 930 | // center: true, 931 | // padding: '1rem', 932 | }), 933 | ], 934 | 935 | 936 | /* 937 | |----------------------------------------------------------------------------- 938 | | Advanced Options https://tailwindcss.com/docs/configuration#options 939 | |----------------------------------------------------------------------------- 940 | | 941 | | Here is where you can tweak advanced configuration options. We recommend 942 | | leaving these options alone unless you absolutely need to change them. 943 | | 944 | */ 945 | 946 | options: { 947 | prefix: '', 948 | important: false, 949 | separator: ':', 950 | }, 951 | 952 | } 953 | --------------------------------------------------------------------------------