ReasonReact Examples

├── src ├── styles.css ├── Index.re ├── pages │ ├── Home.re │ ├── About.re │ └── Error.re ├── App.re └── index.html ├── .gitignore ├── postcss.config.js ├── bsconfig.json ├── package.json ├── webpack.config.js ├── README.md └── tailwind.js /src/styles.css: -------------------------------------------------------------------------------- 1 | @tailwind preflight; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .merlin 3 | .bsb.lock 4 | npm-debug.log 5 | /lib/bs/ 6 | /node_modules/ 7 | *.bs.js 8 | -------------------------------------------------------------------------------- /src/Index.re: -------------------------------------------------------------------------------- 1 | [%raw {|require("./styles.css")|}]; 2 | 3 | ReactDOMRe.renderToElementWithId(, "react-root"); -------------------------------------------------------------------------------- /src/pages/Home.re: -------------------------------------------------------------------------------- 1 | [@react.component] 2 | let make = () => { 3 |

{"This is the home page" |> React.string}

; 4 | }; -------------------------------------------------------------------------------- /src/pages/About.re: -------------------------------------------------------------------------------- 1 | [@react.component] 2 | let make = () => { 3 |

4 | { "This is the about page" |> React.string } 5 |

6 | } -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss')('./tailwind.js'), 4 | require('autoprefixer'), 5 | ] 6 | } -------------------------------------------------------------------------------- /src/App.re: -------------------------------------------------------------------------------- 1 | [@react.component] 2 | let make = () => { 3 | let url = ReasonReactRouter.useUrl(); 4 | 5 | switch (url.path) { 6 | | [] => 7 | | ["about"] => 8 | | _ => 9 | }; 10 | }; -------------------------------------------------------------------------------- /src/pages/Error.re: -------------------------------------------------------------------------------- 1 | [@react.component] 2 | let make = (~code) => { 3 |

4 | {( 5 | switch (code) { 6 | | 404 => "Couldn't find that page!" 7 | | _ => "An error occurred!" 8 | } 9 | ) 10 | |> React.string} 11 |

; 12 | }; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ReasonReact Examples 7 | 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /bsconfig.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "name": "react-hooks-template", 4 | "reason": { 5 | "react-jsx": 3 6 | }, 7 | "sources": { 8 | "dir" : "src", 9 | "subdirs" : true 10 | }, 11 | "package-specs": [{ 12 | "module": "commonjs", 13 | "in-source": true 14 | }], 15 | "suffix": ".bs.js", 16 | "namespace": true, 17 | "bs-dependencies": [ 18 | "reason-react" 19 | ], 20 | "refmt": 3 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "build": "bsb -make-world", 6 | "start": "bsb -make-world -w", 7 | "clean": "bsb -clean-world", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "webpack": "webpack -w", 10 | "webpack:production": "NODE_ENV=production webpack", 11 | "server": "webpack-dev-server" 12 | }, 13 | "keywords": [ 14 | "BuckleScript" 15 | ], 16 | "author": "", 17 | "license": "MIT", 18 | "dependencies": { 19 | "react": "^16.8.6", 20 | "react-dom": "^16.8.6", 21 | "reason-react": ">=0.7.0" 22 | }, 23 | "devDependencies": { 24 | "autoprefixer": "^9.5.1", 25 | "bs-platform": "^5.0.3", 26 | "css-loader": "^2.1.1", 27 | "html-webpack-plugin": "^3.2.0", 28 | "mini-css-extract-plugin": "^0.6.0", 29 | "postcss": "^7.0.14", 30 | "postcss-loader": "^3.0.0", 31 | "style-loader": "^0.23.1", 32 | "tailwindcss": "^0.7.4", 33 | "webpack": "^4.0.1", 34 | "webpack-cli": "^3.1.1", 35 | "webpack-dev-server": "^3.1.8" 36 | } 37 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 4 | 5 | const outputDir = path.join(__dirname, 'build/'); 6 | const isProd = process.env.NODE_ENV === 'production'; 7 | 8 | module.exports = { 9 | entry: './src/Index.bs.js', 10 | mode: isProd ? 'production' : 'development', 11 | output: { 12 | path: outputDir, 13 | filename: 'Index.js' 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.css$/, 19 | use: [ 20 | MiniCssExtractPlugin.loader, 21 | "css-loader", 22 | "postcss-loader", 23 | ], 24 | }, 25 | ], 26 | }, 27 | plugins: [ 28 | new MiniCssExtractPlugin({ 29 | filename: "styles.css", 30 | chunkFilename: "styles.css" 31 | }), 32 | new HtmlWebpackPlugin({ 33 | template: './src/index.html', 34 | filename: "./index.html", 35 | }), 36 | ], 37 | devServer: { 38 | compress: true, 39 | contentBase: outputDir, 40 | port: process.env.PORT || 8000, 41 | historyApiFallback: true, 42 | }, 43 | }; 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # blog 2 | 3 | ## Run Project 4 | 5 | ```sh 6 | npm install 7 | npm start 8 | # in another tab 9 | npm run webpack 10 | ``` 11 | 12 | After you see the webpack compilation succeed (the `npm run webpack` step), open up `build/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes. 13 | 14 | **For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example 15 | 16 | ## Run Project with Server 17 | 18 | To run with the webpack development server run `npm run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh. 19 | 20 | Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root. 21 | 22 | To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 npm run server`). 23 | 24 | ## Build for Production 25 | 26 | ```sh 27 | npm run clean 28 | npm run build 29 | npm run webpack:production 30 | ``` 31 | 32 | This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`). 33 | 34 | If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up). 35 | 36 | **To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code. 37 | -------------------------------------------------------------------------------- /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 | 50 | // base16 oceanic next 51 | 52 | 'black': '#1B2B34', 53 | 'grey-darkest': '#343D46', 54 | 'grey-darker': '#4F5B66', 55 | 'grey-dark': '#65737E', 56 | 'grey-light': '#A7ADBA', 57 | 'grey-lighter': '#C0C5CE', 58 | 'grey-lightest': '#CDD3DE', 59 | 'white': '#D8DEE9', 60 | 61 | 'red': '#EC5f67', 62 | 63 | 'orange': '#F99157', 64 | 65 | 'yellow': '#FAC863', 66 | 67 | 'green': '#99C794', 68 | 69 | 'teal': '#5FB3B3', 70 | 71 | 'blue': '#6699CC', 72 | 73 | 'purple': '#C594C5', 74 | 75 | 'brown': '#AB7967', 76 | } 77 | 78 | module.exports = { 79 | 80 | /* 81 | |----------------------------------------------------------------------------- 82 | | Colors https://tailwindcss.com/docs/colors 83 | |----------------------------------------------------------------------------- 84 | | 85 | | The color palette defined above is also assigned to the "colors" key of 86 | | your Tailwind config. This makes it easy to access them in your CSS 87 | | using Tailwind's config helper. For example: 88 | | 89 | | .error { color: config('colors.red') } 90 | | 91 | */ 92 | 93 | colors: colors, 94 | 95 | 96 | /* 97 | |----------------------------------------------------------------------------- 98 | | Screens https://tailwindcss.com/docs/responsive-design 99 | |----------------------------------------------------------------------------- 100 | | 101 | | Screens in Tailwind are translated to CSS media queries. They define the 102 | | responsive breakpoints for your project. By default Tailwind takes a 103 | | "mobile first" approach, where each screen size represents a minimum 104 | | viewport width. Feel free to have as few or as many screens as you 105 | | want, naming them in whatever way you'd prefer for your project. 106 | | 107 | | Tailwind also allows for more complex screen definitions, which can be 108 | | useful in certain situations. Be sure to see the full responsive 109 | | documentation for a complete list of options. 110 | | 111 | | Class name: .{screen}:{utility} 112 | | 113 | */ 114 | 115 | screens: { 116 | 'sm': '576px', 117 | 'md': '768px', 118 | 'lg': '992px', 119 | 'xl': '1200px', 120 | }, 121 | 122 | 123 | /* 124 | |----------------------------------------------------------------------------- 125 | | Fonts https://tailwindcss.com/docs/fonts 126 | |----------------------------------------------------------------------------- 127 | | 128 | | Here is where you define your project's font stack, or font families. 129 | | Keep in mind that Tailwind doesn't actually load any fonts for you. 130 | | If you're using custom fonts you'll need to import them prior to 131 | | defining them here. 132 | | 133 | | By default we provide a native font stack that works remarkably well on 134 | | any device or OS you're using, since it just uses the default fonts 135 | | provided by the platform. 136 | | 137 | | Class name: .font-{name} 138 | | CSS property: font-family 139 | | 140 | */ 141 | 142 | fonts: { 143 | 'sans': [ 144 | 'system-ui', 145 | 'BlinkMacSystemFont', 146 | '-apple-system', 147 | 'Segoe UI', 148 | 'Roboto', 149 | 'Oxygen', 150 | 'Ubuntu', 151 | 'Cantarell', 152 | 'Fira Sans', 153 | 'Droid Sans', 154 | 'Helvetica Neue', 155 | 'sans-serif', 156 | ], 157 | 'serif': [ 158 | 'Constantia', 159 | 'Lucida Bright', 160 | 'Lucidabright', 161 | 'Lucida Serif', 162 | 'Lucida', 163 | 'DejaVu Serif', 164 | 'Bitstream Vera Serif', 165 | 'Liberation Serif', 166 | 'Georgia', 167 | 'serif', 168 | ], 169 | 'mono': [ 170 | 'Fira Mono', 171 | 'monospace', 172 | ], 173 | }, 174 | 175 | 176 | /* 177 | |----------------------------------------------------------------------------- 178 | | Text sizes https://tailwindcss.com/docs/text-sizing 179 | |----------------------------------------------------------------------------- 180 | | 181 | | Here is where you define your text sizes. Name these in whatever way 182 | | makes the most sense to you. We use size names by default, but 183 | | you're welcome to use a numeric scale or even something else 184 | | entirely. 185 | | 186 | | By default Tailwind uses the "rem" unit type for most measurements. 187 | | This allows you to set a root font size which all other sizes are 188 | | then based on. That said, you are free to use whatever units you 189 | | prefer, be it rems, ems, pixels or other. 190 | | 191 | | Class name: .text-{size} 192 | | CSS property: font-size 193 | | 194 | */ 195 | 196 | textSizes: { 197 | 'xs': '.75rem', // 12px 198 | 'sm': '.875rem', // 14px 199 | 'base': '1rem', // 16px 200 | 'lg': '1.125rem', // 18px 201 | 'xl': '1.25rem', // 20px 202 | '2xl': '1.5rem', // 24px 203 | '3xl': '1.875rem', // 30px 204 | '4xl': '2.25rem', // 36px 205 | '5xl': '3rem', // 48px 206 | }, 207 | 208 | 209 | /* 210 | |----------------------------------------------------------------------------- 211 | | Font weights https://tailwindcss.com/docs/font-weight 212 | |----------------------------------------------------------------------------- 213 | | 214 | | Here is where you define your font weights. We've provided a list of 215 | | common font weight names with their respective numeric scale values 216 | | to get you started. It's unlikely that your project will require 217 | | all of these, so we recommend removing those you don't need. 218 | | 219 | | Class name: .font-{weight} 220 | | CSS property: font-weight 221 | | 222 | */ 223 | 224 | fontWeights: { 225 | 'hairline': 100, 226 | 'thin': 200, 227 | 'light': 300, 228 | 'normal': 400, 229 | 'medium': 500, 230 | 'semibold': 600, 231 | 'bold': 700, 232 | 'extrabold': 800, 233 | 'black': 900, 234 | }, 235 | 236 | 237 | /* 238 | |----------------------------------------------------------------------------- 239 | | Leading (line height) https://tailwindcss.com/docs/line-height 240 | |----------------------------------------------------------------------------- 241 | | 242 | | Here is where you define your line height values, or as we call 243 | | them in Tailwind, leadings. 244 | | 245 | | Class name: .leading-{size} 246 | | CSS property: line-height 247 | | 248 | */ 249 | 250 | leading: { 251 | 'none': 1, 252 | 'tight': 1.25, 253 | 'normal': 1.5, 254 | 'loose': 2, 255 | }, 256 | 257 | 258 | /* 259 | |----------------------------------------------------------------------------- 260 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 261 | |----------------------------------------------------------------------------- 262 | | 263 | | Here is where you define your letter spacing values, or as we call 264 | | them in Tailwind, tracking. 265 | | 266 | | Class name: .tracking-{size} 267 | | CSS property: letter-spacing 268 | | 269 | */ 270 | 271 | tracking: { 272 | 'tight': '-0.05em', 273 | 'normal': '0', 274 | 'wide': '0.05em', 275 | }, 276 | 277 | 278 | /* 279 | |----------------------------------------------------------------------------- 280 | | Text colors https://tailwindcss.com/docs/text-color 281 | |----------------------------------------------------------------------------- 282 | | 283 | | Here is where you define your text colors. By default these use the 284 | | color palette we defined above, however you're welcome to set these 285 | | independently if that makes sense for your project. 286 | | 287 | | Class name: .text-{color} 288 | | CSS property: color 289 | | 290 | */ 291 | 292 | textColors: colors, 293 | 294 | 295 | /* 296 | |----------------------------------------------------------------------------- 297 | | Background colors https://tailwindcss.com/docs/background-color 298 | |----------------------------------------------------------------------------- 299 | | 300 | | Here is where you define your background colors. By default these use 301 | | the color palette we defined above, however you're welcome to set 302 | | these independently if that makes sense for your project. 303 | | 304 | | Class name: .bg-{color} 305 | | CSS property: background-color 306 | | 307 | */ 308 | 309 | backgroundColors: colors, 310 | 311 | 312 | /* 313 | |----------------------------------------------------------------------------- 314 | | Background sizes https://tailwindcss.com/docs/background-size 315 | |----------------------------------------------------------------------------- 316 | | 317 | | Here is where you define your background sizes. We provide some common 318 | | values that are useful in most projects, but feel free to add other sizes 319 | | that are specific to your project here as well. 320 | | 321 | | Class name: .bg-{size} 322 | | CSS property: background-size 323 | | 324 | */ 325 | 326 | backgroundSize: { 327 | 'auto': 'auto', 328 | 'cover': 'cover', 329 | 'contain': 'contain', 330 | }, 331 | 332 | 333 | /* 334 | |----------------------------------------------------------------------------- 335 | | Border widths https://tailwindcss.com/docs/border-width 336 | |----------------------------------------------------------------------------- 337 | | 338 | | Here is where you define your border widths. Take note that border 339 | | widths require a special "default" value set as well. This is the 340 | | width that will be used when you do not specify a border width. 341 | | 342 | | Class name: .border{-side?}{-width?} 343 | | CSS property: border-width 344 | | 345 | */ 346 | 347 | borderWidths: { 348 | default: '1px', 349 | '0': '0', 350 | '2': '2px', 351 | '4': '4px', 352 | '8': '8px', 353 | }, 354 | 355 | 356 | /* 357 | |----------------------------------------------------------------------------- 358 | | Border colors https://tailwindcss.com/docs/border-color 359 | |----------------------------------------------------------------------------- 360 | | 361 | | Here is where you define your border colors. By default these use the 362 | | color palette we defined above, however you're welcome to set these 363 | | independently if that makes sense for your project. 364 | | 365 | | Take note that border colors require a special "default" value set 366 | | as well. This is the color that will be used when you do not 367 | | specify a border color. 368 | | 369 | | Class name: .border-{color} 370 | | CSS property: border-color 371 | | 372 | */ 373 | 374 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 375 | 376 | 377 | /* 378 | |----------------------------------------------------------------------------- 379 | | Border radius https://tailwindcss.com/docs/border-radius 380 | |----------------------------------------------------------------------------- 381 | | 382 | | Here is where you define your border radius values. If a `default` radius 383 | | is provided, it will be made available as the non-suffixed `.rounded` 384 | | utility. 385 | | 386 | | If your scale includes a `0` value to reset already rounded corners, it's 387 | | a good idea to put it first so other values are able to override it. 388 | | 389 | | Class name: .rounded{-side?}{-size?} 390 | | CSS property: border-radius 391 | | 392 | */ 393 | 394 | borderRadius: { 395 | 'none': '0', 396 | 'sm': '.125rem', 397 | default: '.25rem', 398 | 'lg': '.5rem', 399 | 'full': '9999px', 400 | }, 401 | 402 | 403 | /* 404 | |----------------------------------------------------------------------------- 405 | | Width https://tailwindcss.com/docs/width 406 | |----------------------------------------------------------------------------- 407 | | 408 | | Here is where you define your width utility sizes. These can be 409 | | percentage based, pixels, rems, or any other units. By default 410 | | we provide a sensible rem based numeric scale, a percentage 411 | | based fraction scale, plus some other common use-cases. You 412 | | can, of course, modify these values as needed. 413 | | 414 | | 415 | | It's also worth mentioning that Tailwind automatically escapes 416 | | invalid CSS class name characters, which allows you to have 417 | | awesome classes like .w-2/3. 418 | | 419 | | Class name: .w-{size} 420 | | CSS property: width 421 | | 422 | */ 423 | 424 | width: { 425 | 'auto': 'auto', 426 | 'px': '1px', 427 | '1': '0.25rem', 428 | '2': '0.5rem', 429 | '3': '0.75rem', 430 | '4': '1rem', 431 | '5': '1.25rem', 432 | '6': '1.5rem', 433 | '8': '2rem', 434 | '10': '2.5rem', 435 | '12': '3rem', 436 | '16': '4rem', 437 | '24': '6rem', 438 | '32': '8rem', 439 | '48': '12rem', 440 | '64': '16rem', 441 | '1/2': '50%', 442 | '1/3': '33.33333%', 443 | '2/3': '66.66667%', 444 | '1/4': '25%', 445 | '3/4': '75%', 446 | '1/5': '20%', 447 | '2/5': '40%', 448 | '3/5': '60%', 449 | '4/5': '80%', 450 | '1/6': '16.66667%', 451 | '5/6': '83.33333%', 452 | 'full': '100%', 453 | 'screen': '100vw', 454 | }, 455 | 456 | 457 | /* 458 | |----------------------------------------------------------------------------- 459 | | Height https://tailwindcss.com/docs/height 460 | |----------------------------------------------------------------------------- 461 | | 462 | | Here is where you define your height utility sizes. These can be 463 | | percentage based, pixels, rems, or any other units. By default 464 | | we provide a sensible rem based numeric scale plus some other 465 | | common use-cases. You can, of course, modify these values as 466 | | needed. 467 | | 468 | | Class name: .h-{size} 469 | | CSS property: height 470 | | 471 | */ 472 | 473 | height: { 474 | 'auto': 'auto', 475 | 'px': '1px', 476 | '1': '0.25rem', 477 | '2': '0.5rem', 478 | '3': '0.75rem', 479 | '4': '1rem', 480 | '5': '1.25rem', 481 | '6': '1.5rem', 482 | '8': '2rem', 483 | '10': '2.5rem', 484 | '12': '3rem', 485 | '16': '4rem', 486 | '24': '6rem', 487 | '32': '8rem', 488 | '48': '12rem', 489 | '64': '16rem', 490 | 'full': '100%', 491 | 'screen': '100vh', 492 | }, 493 | 494 | 495 | /* 496 | |----------------------------------------------------------------------------- 497 | | Minimum width https://tailwindcss.com/docs/min-width 498 | |----------------------------------------------------------------------------- 499 | | 500 | | Here is where you define your minimum width utility sizes. These can 501 | | be percentage based, pixels, rems, or any other units. We provide a 502 | | couple common use-cases by default. You can, of course, modify 503 | | these values as needed. 504 | | 505 | | Class name: .min-w-{size} 506 | | CSS property: min-width 507 | | 508 | */ 509 | 510 | minWidth: { 511 | '0': '0', 512 | 'full': '100%', 513 | }, 514 | 515 | 516 | /* 517 | |----------------------------------------------------------------------------- 518 | | Minimum height https://tailwindcss.com/docs/min-height 519 | |----------------------------------------------------------------------------- 520 | | 521 | | Here is where you define your minimum height utility sizes. These can 522 | | be percentage based, pixels, rems, or any other units. We provide a 523 | | few common use-cases by default. You can, of course, modify these 524 | | values as needed. 525 | | 526 | | Class name: .min-h-{size} 527 | | CSS property: min-height 528 | | 529 | */ 530 | 531 | minHeight: { 532 | '0': '0', 533 | 'full': '100%', 534 | 'screen': '100vh', 535 | }, 536 | 537 | 538 | /* 539 | |----------------------------------------------------------------------------- 540 | | Maximum width https://tailwindcss.com/docs/max-width 541 | |----------------------------------------------------------------------------- 542 | | 543 | | Here is where you define your maximum width utility sizes. These can 544 | | be percentage based, pixels, rems, or any other units. By default 545 | | we provide a sensible rem based scale and a "full width" size, 546 | | which is basically a reset utility. You can, of course, 547 | | modify these values as needed. 548 | | 549 | | Class name: .max-w-{size} 550 | | CSS property: max-width 551 | | 552 | */ 553 | 554 | maxWidth: { 555 | 'xs': '20rem', 556 | 'sm': '30rem', 557 | 'md': '40rem', 558 | 'lg': '50rem', 559 | 'xl': '60rem', 560 | '2xl': '70rem', 561 | '3xl': '80rem', 562 | '4xl': '90rem', 563 | '5xl': '100rem', 564 | 'full': '100%', 565 | }, 566 | 567 | 568 | /* 569 | |----------------------------------------------------------------------------- 570 | | Maximum height https://tailwindcss.com/docs/max-height 571 | |----------------------------------------------------------------------------- 572 | | 573 | | Here is where you define your maximum height utility sizes. These can 574 | | be percentage based, pixels, rems, or any other units. We provide a 575 | | couple common use-cases by default. You can, of course, modify 576 | | these values as needed. 577 | | 578 | | Class name: .max-h-{size} 579 | | CSS property: max-height 580 | | 581 | */ 582 | 583 | maxHeight: { 584 | 'full': '100%', 585 | 'screen': '100vh', 586 | }, 587 | 588 | 589 | /* 590 | |----------------------------------------------------------------------------- 591 | | Padding https://tailwindcss.com/docs/padding 592 | |----------------------------------------------------------------------------- 593 | | 594 | | Here is where you define your padding utility sizes. These can be 595 | | percentage based, pixels, rems, or any other units. By default we 596 | | provide a sensible rem based numeric scale plus a couple other 597 | | common use-cases like "1px". You can, of course, modify these 598 | | values as needed. 599 | | 600 | | Class name: .p{side?}-{size} 601 | | CSS property: padding 602 | | 603 | */ 604 | 605 | padding: { 606 | 'px': '1px', 607 | '0': '0', 608 | '1': '0.25rem', 609 | '2': '0.5rem', 610 | '3': '0.75rem', 611 | '4': '1rem', 612 | '5': '1.25rem', 613 | '6': '1.5rem', 614 | '8': '2rem', 615 | '10': '2.5rem', 616 | '12': '3rem', 617 | '16': '4rem', 618 | '20': '5rem', 619 | '24': '6rem', 620 | '32': '8rem', 621 | }, 622 | 623 | 624 | /* 625 | |----------------------------------------------------------------------------- 626 | | Margin https://tailwindcss.com/docs/margin 627 | |----------------------------------------------------------------------------- 628 | | 629 | | Here is where you define your margin utility sizes. These can be 630 | | percentage based, pixels, rems, or any other units. By default we 631 | | provide a sensible rem based numeric scale plus a couple other 632 | | common use-cases like "1px". You can, of course, modify these 633 | | values as needed. 634 | | 635 | | Class name: .m{side?}-{size} 636 | | CSS property: margin 637 | | 638 | */ 639 | 640 | margin: { 641 | 'auto': 'auto', 642 | 'px': '1px', 643 | '0': '0', 644 | '1': '0.25rem', 645 | '2': '0.5rem', 646 | '3': '0.75rem', 647 | '4': '1rem', 648 | '5': '1.25rem', 649 | '6': '1.5rem', 650 | '8': '2rem', 651 | '10': '2.5rem', 652 | '12': '3rem', 653 | '16': '4rem', 654 | '20': '5rem', 655 | '24': '6rem', 656 | '32': '8rem', 657 | }, 658 | 659 | 660 | /* 661 | |----------------------------------------------------------------------------- 662 | | Negative margin https://tailwindcss.com/docs/negative-margin 663 | |----------------------------------------------------------------------------- 664 | | 665 | | Here is where you define your negative margin utility sizes. These can 666 | | be percentage based, pixels, rems, or any other units. By default we 667 | | provide matching values to the padding scale since these utilities 668 | | generally get used together. You can, of course, modify these 669 | | values as needed. 670 | | 671 | | Class name: .-m{side?}-{size} 672 | | CSS property: margin 673 | | 674 | */ 675 | 676 | negativeMargin: { 677 | 'px': '1px', 678 | '0': '0', 679 | '1': '0.25rem', 680 | '2': '0.5rem', 681 | '3': '0.75rem', 682 | '4': '1rem', 683 | '5': '1.25rem', 684 | '6': '1.5rem', 685 | '8': '2rem', 686 | '10': '2.5rem', 687 | '12': '3rem', 688 | '16': '4rem', 689 | '20': '5rem', 690 | '24': '6rem', 691 | '32': '8rem', 692 | }, 693 | 694 | 695 | /* 696 | |----------------------------------------------------------------------------- 697 | | Shadows https://tailwindcss.com/docs/shadows 698 | |----------------------------------------------------------------------------- 699 | | 700 | | Here is where you define your shadow utilities. As you can see from 701 | | the defaults we provide, it's possible to apply multiple shadows 702 | | per utility using comma separation. 703 | | 704 | | If a `default` shadow is provided, it will be made available as the non- 705 | | suffixed `.shadow` utility. 706 | | 707 | | Class name: .shadow-{size?} 708 | | CSS property: box-shadow 709 | | 710 | */ 711 | 712 | shadows: { 713 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 714 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 715 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 716 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 717 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 718 | 'none': 'none', 719 | }, 720 | 721 | 722 | /* 723 | |----------------------------------------------------------------------------- 724 | | Z-index https://tailwindcss.com/docs/z-index 725 | |----------------------------------------------------------------------------- 726 | | 727 | | Here is where you define your z-index utility values. By default we 728 | | provide a sensible numeric scale. You can, of course, modify these 729 | | values as needed. 730 | | 731 | | Class name: .z-{index} 732 | | CSS property: z-index 733 | | 734 | */ 735 | 736 | zIndex: { 737 | 'auto': 'auto', 738 | '0': 0, 739 | '10': 10, 740 | '20': 20, 741 | '30': 30, 742 | '40': 40, 743 | '50': 50, 744 | }, 745 | 746 | 747 | /* 748 | |----------------------------------------------------------------------------- 749 | | Opacity https://tailwindcss.com/docs/opacity 750 | |----------------------------------------------------------------------------- 751 | | 752 | | Here is where you define your opacity utility values. By default we 753 | | provide a sensible numeric scale. You can, of course, modify these 754 | | values as needed. 755 | | 756 | | Class name: .opacity-{name} 757 | | CSS property: opacity 758 | | 759 | */ 760 | 761 | opacity: { 762 | '0': '0', 763 | '25': '.25', 764 | '50': '.5', 765 | '75': '.75', 766 | '100': '1', 767 | }, 768 | 769 | 770 | /* 771 | |----------------------------------------------------------------------------- 772 | | SVG fill https://tailwindcss.com/docs/svg 773 | |----------------------------------------------------------------------------- 774 | | 775 | | Here is where you define your SVG fill colors. By default we just provide 776 | | `fill-current` which sets the fill to the current text color. This lets you 777 | | specify a fill color using existing text color utilities and helps keep the 778 | | generated CSS file size down. 779 | | 780 | | Class name: .fill-{name} 781 | | CSS property: fill 782 | | 783 | */ 784 | 785 | svgFill: { 786 | 'current': 'currentColor', 787 | }, 788 | 789 | 790 | /* 791 | |----------------------------------------------------------------------------- 792 | | SVG stroke https://tailwindcss.com/docs/svg 793 | |----------------------------------------------------------------------------- 794 | | 795 | | Here is where you define your SVG stroke colors. By default we just provide 796 | | `stroke-current` which sets the stroke to the current text color. This lets 797 | | you specify a stroke color using existing text color utilities and helps 798 | | keep the generated CSS file size down. 799 | | 800 | | Class name: .stroke-{name} 801 | | CSS property: stroke 802 | | 803 | */ 804 | 805 | svgStroke: { 806 | 'current': 'currentColor', 807 | }, 808 | 809 | 810 | /* 811 | |----------------------------------------------------------------------------- 812 | | Modules https://tailwindcss.com/docs/configuration#modules 813 | |----------------------------------------------------------------------------- 814 | | 815 | | Here is where you control which modules are generated and what variants are 816 | | generated for each of those modules. 817 | | 818 | | Currently supported variants: 819 | | - responsive 820 | | - hover 821 | | - focus 822 | | - focus-within 823 | | - active 824 | | - group-hover 825 | | 826 | | To disable a module completely, use `false` instead of an array. 827 | | 828 | */ 829 | 830 | modules: { 831 | appearance: ['responsive'], 832 | backgroundAttachment: ['responsive'], 833 | backgroundColors: ['responsive', 'hover', 'focus'], 834 | backgroundPosition: ['responsive'], 835 | backgroundRepeat: ['responsive'], 836 | backgroundSize: ['responsive'], 837 | borderCollapse: [], 838 | borderColors: ['responsive', 'hover', 'focus'], 839 | borderRadius: ['responsive'], 840 | borderStyle: ['responsive'], 841 | borderWidths: ['responsive'], 842 | cursor: ['responsive'], 843 | display: ['responsive'], 844 | flexbox: ['responsive'], 845 | float: ['responsive'], 846 | fonts: ['responsive'], 847 | fontWeights: ['responsive', 'hover', 'focus'], 848 | height: ['responsive'], 849 | leading: ['responsive'], 850 | lists: ['responsive'], 851 | margin: ['responsive'], 852 | maxHeight: ['responsive'], 853 | maxWidth: ['responsive'], 854 | minHeight: ['responsive'], 855 | minWidth: ['responsive'], 856 | negativeMargin: ['responsive'], 857 | objectFit: false, 858 | objectPosition: false, 859 | opacity: ['responsive'], 860 | outline: ['focus'], 861 | overflow: ['responsive'], 862 | padding: ['responsive'], 863 | pointerEvents: ['responsive'], 864 | position: ['responsive'], 865 | resize: ['responsive'], 866 | shadows: ['responsive', 'hover', 'focus'], 867 | svgFill: [], 868 | svgStroke: [], 869 | tableLayout: ['responsive'], 870 | textAlign: ['responsive'], 871 | textColors: ['responsive', 'hover', 'focus'], 872 | textSizes: ['responsive'], 873 | textStyle: ['responsive', 'hover', 'focus'], 874 | tracking: ['responsive'], 875 | userSelect: ['responsive'], 876 | verticalAlign: ['responsive'], 877 | visibility: ['responsive'], 878 | whitespace: ['responsive'], 879 | width: ['responsive'], 880 | zIndex: ['responsive'], 881 | }, 882 | 883 | 884 | /* 885 | |----------------------------------------------------------------------------- 886 | | Plugins https://tailwindcss.com/docs/plugins 887 | |----------------------------------------------------------------------------- 888 | | 889 | | Here is where you can register any plugins you'd like to use in your 890 | | project. Tailwind's built-in `container` plugin is enabled by default to 891 | | give you a Bootstrap-style responsive container component out of the box. 892 | | 893 | | Be sure to view the complete plugin documentation to learn more about how 894 | | the plugin system works. 895 | | 896 | */ 897 | 898 | plugins: [ 899 | require('tailwindcss/plugins/container')({ 900 | // center: true, 901 | // padding: '1rem', 902 | }), 903 | ], 904 | 905 | 906 | /* 907 | |----------------------------------------------------------------------------- 908 | | Advanced Options https://tailwindcss.com/docs/configuration#options 909 | |----------------------------------------------------------------------------- 910 | | 911 | | Here is where you can tweak advanced configuration options. We recommend 912 | | leaving these options alone unless you absolutely need to change them. 913 | | 914 | */ 915 | 916 | options: { 917 | prefix: '', 918 | important: false, 919 | separator: ':', 920 | }, 921 | 922 | } 923 | --------------------------------------------------------------------------------