├── .circleci └── config.yml ├── .github └── main.workflow ├── .gitignore ├── LICENSE ├── README.md ├── babel-plugin-macros.config.js ├── cypress.json ├── cypress ├── .eslintrc ├── e2e │ └── App.spec.js ├── plugins │ └── index.js ├── snapshots │ ├── All Specs │ │ └── The App should be styled -- successfully loads styled.snap.png │ └── App.spec.js │ │ └── The App should be styled -- successfully loads styled.snap.png └── support │ ├── commands.js │ └── index.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── renovate.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js ├── tailwind.config.js └── tailwind.js /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 # use CircleCI 2.0 2 | jobs: # a collection of steps 3 | build: # runs not using Workflows must have a `build` job as entry point 4 | docker: # run the steps with Docker 5 | - image: cypress/base:16 6 | environment: 7 | ## this enables colors in the output 8 | TERM: xterm 9 | working_directory: ~/app # directory where steps will run 10 | steps: # a collection of executable commands 11 | - checkout # special step to check out source code to working directory 12 | ########################## 13 | # install base dependencies 14 | - restore_cache: # special step to restore the dependency cache 15 | # Read about caching dependencies: https://circleci.com/docs/2.0/caching/ 16 | key: dependency-cache-{{ checksum "package.json" }}-{{ checksum "package-lock.json" }} 17 | - run: 18 | name: Install Dependencies 19 | command: npm ci 20 | - save_cache: # special step to save the dependency cache 21 | key: dependency-cache-{{ checksum "package.json" }}-{{ checksum "package-lock.json" }} 22 | paths: 23 | - ./node_modules 24 | - run: 25 | name: Running E2E tests 26 | command: npm run test:ci 27 | - store_artifacts: 28 | path: cypress/videos 29 | - store_artifacts: 30 | path: cypress/screenshots 31 | - store_artifacts: 32 | path: cypress/snapshots 33 | -------------------------------------------------------------------------------- /.github/main.workflow: -------------------------------------------------------------------------------- 1 | workflow "New workflow" { 2 | on = "push" 3 | resolves = ["Build"] 4 | } 5 | 6 | action "install" { 7 | uses = "actions/npm@e7aaefed7c9f2e83d493ff810f17fa5ccd7ed437" 8 | runs = "npm" 9 | args = "install" 10 | } 11 | 12 | action "Build" { 13 | uses = "actions/npm@e7aaefed7c9f2e83d493ff810f17fa5ccd7ed437" 14 | needs = ["install"] 15 | runs = "npm" 16 | args = "run build" 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | /cypress/screenshots 11 | /cypress/videos 12 | __diff_output__ 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .vscode 20 | .env.local 21 | .env.development.local 22 | .env.test.local 23 | .env.production.local 24 | .eslintcache 25 | 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Christoph Benjamin Weber 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | [![CircleCI](https://circleci.com/gh/kriswep/cra-tailwindcss-in-js.svg?style=svg)](https://circleci.com/gh/kriswep/cra-tailwindcss-in-js) 4 | 5 | It shows how you could setup [Tailwind CSS](https://tailwindcss.com/), a utility-first css framework, in an CRA environment with styled components and babel macros. Read more about the setup steps and benefits using [Tailwind and css-in-js combined](https://wetainment.com/articles/tailwind-css-in-js/). 6 | 7 | *Updated to work with Tailwind version 1!* 8 | 9 | ## Available Scripts 10 | 11 | In the project directory, you can run: 12 | 13 | ### `npm start` 14 | 15 | Runs the app in the development mode.
16 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 17 | 18 | The page will reload if you make edits.
19 | You will also see any lint errors in the console. 20 | 21 | ### `npm test` 22 | 23 | Launches the test runner in the interactive watch mode.
24 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 25 | 26 | ### `npm run build` 27 | 28 | Builds the app for production to the `build` folder.
29 | It correctly bundles React in production mode and optimizes the build for the best performance. 30 | 31 | The build is minified and the filenames include the hashes.
32 | Your app is ready to be deployed! 33 | 34 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 35 | 36 | ### `npm run eject` 37 | 38 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 39 | 40 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 41 | 42 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 43 | 44 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 45 | 46 | ## Learn More 47 | 48 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 49 | 50 | To learn React, check out the [React documentation](https://reactjs.org/). 51 | 52 | ### Code Splitting 53 | 54 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 55 | 56 | ### Analyzing the Bundle Size 57 | 58 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 59 | 60 | ### Making a Progressive Web App 61 | 62 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 63 | 64 | ### Advanced Configuration 65 | 66 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 67 | 68 | ### Deployment 69 | 70 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 71 | 72 | ### `npm run build` fails to minify 73 | 74 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 75 | -------------------------------------------------------------------------------- /babel-plugin-macros.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tailwind: { 3 | config: './src/tailwind.config.js', // if you added a config file 4 | styled: 'styled-components/macro' 5 | } 6 | } -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000", 3 | "integrationFolder": "cypress/e2e" 4 | } 5 | -------------------------------------------------------------------------------- /cypress/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["cypress"], 3 | "env": { 4 | "cypress/globals": true 5 | } 6 | } -------------------------------------------------------------------------------- /cypress/e2e/App.spec.js: -------------------------------------------------------------------------------- 1 | describe('The App should be styled', function() { 2 | it('successfully loads styled', function() { 3 | cy.visit('/'); 4 | cy.matchImageSnapshot(); 5 | }) 6 | }) -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | const { 12 | addMatchImageSnapshotPlugin, 13 | } = require('cypress-image-snapshot/plugin'); 14 | 15 | // This function is called when a project is opened or re-opened (e.g. due to 16 | // the project's config changing) 17 | 18 | module.exports = (on, config) => { 19 | // `on` is used to hook into various events Cypress emits 20 | // `config` is the resolved Cypress config 21 | addMatchImageSnapshotPlugin(on, config); 22 | }; -------------------------------------------------------------------------------- /cypress/snapshots/All Specs/The App should be styled -- successfully loads styled.snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriswep/cra-tailwindcss-in-js/c3920d859181bc246929b7010c1e52a9cd4997a7/cypress/snapshots/All Specs/The App should be styled -- successfully loads styled.snap.png -------------------------------------------------------------------------------- /cypress/snapshots/App.spec.js/The App should be styled -- successfully loads styled.snap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriswep/cra-tailwindcss-in-js/c3920d859181bc246929b7010c1e52a9cd4997a7/cypress/snapshots/App.spec.js/The App should be styled -- successfully loads styled.snap.png -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | 27 | import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'; 28 | 29 | addMatchImageSnapshotCommand({ 30 | failureThreshold: 0.006, 31 | failureThresholdType: 'percent', 32 | customDiffConfig: { threshold: 0.0 }, 33 | capture: 'viewport', 34 | }); 35 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cra-tailwindcss-in-js", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "18.2.0", 7 | "react-dom": "18.2.0", 8 | "react-scripts": "4.0.3", 9 | "styled-components": "5.3.5" 10 | }, 11 | "devDependencies": { 12 | "cypress": "9.7.0", 13 | "cypress-image-snapshot": "4.0.1", 14 | "eslint-plugin-cypress": "2.12.1", 15 | "start-server-and-test": "1.14.0", 16 | "tailwind.macro": "1.0.0-alpha.10" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "eject": "react-scripts eject", 22 | "test": "cypress open", 23 | "test:ci": "start-server-and-test start http://localhost:3000 cy:run", 24 | "cy:open": "cypress open", 25 | "cy:run": "cypress run", 26 | "cy:updateSnapshots": "cypress run --env updateSnapshots=true" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 30 | }, 31 | "browserslist": [ 32 | ">0.2%", 33 | "not dead", 34 | "not ie <= 11", 35 | "not op_mini all" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kriswep/cra-tailwindcss-in-js/c3920d859181bc246929b7010c1e52a9cd4997a7/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | animation: App-logo-spin infinite 20s linear; 3 | height: 40vmin; 4 | } 5 | 6 | @keyframes App-logo-spin { 7 | from { 8 | transform: rotate(0deg); 9 | } 10 | to { 11 | transform: rotate(360deg); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import styled from 'styled-components/macro'; 3 | import tw from 'tailwind.macro'; 4 | 5 | import logo from './logo.svg'; 6 | import './App.css'; 7 | 8 | const Header = styled.header` 9 | ${tw`bg-black min-h-screen flex flex-col items-center justify-center text-xl text-white`}; 10 | `; 11 | 12 | class App extends Component { 13 | render() { 14 | return ( 15 |
16 |
17 | logo 18 |

19 | Edit src/App.js and save to reload. 20 |

21 | 28 | Learn React 29 | 30 |
31 |
32 | ); 33 | } 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /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: Arial, Helvetica, "Helvetica Neue", sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: Arial, Helvetica, "Helvetica Neue", sans-serif; 11 | font-style: italic; 12 | } 13 | -------------------------------------------------------------------------------- /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 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: { 4 | colors: { 5 | 'regal-blue': '#243c5a', 6 | } 7 | } 8 | }, 9 | variants: {}, 10 | plugins: [] 11 | } 12 | -------------------------------------------------------------------------------- /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 | | CSS property: font-family 193 | | 194 | */ 195 | 196 | fonts: { 197 | 'sans': [ 198 | 'system-ui', 199 | 'BlinkMacSystemFont', 200 | '-apple-system', 201 | 'Segoe UI', 202 | 'Roboto', 203 | 'Oxygen', 204 | 'Ubuntu', 205 | 'Cantarell', 206 | 'Fira Sans', 207 | 'Droid Sans', 208 | 'Helvetica Neue', 209 | 'sans-serif', 210 | ], 211 | 'serif': [ 212 | 'Constantia', 213 | 'Lucida Bright', 214 | 'Lucidabright', 215 | 'Lucida Serif', 216 | 'Lucida', 217 | 'DejaVu Serif', 218 | 'Bitstream Vera Serif', 219 | 'Liberation Serif', 220 | 'Georgia', 221 | 'serif', 222 | ], 223 | 'mono': [ 224 | 'Menlo', 225 | 'Monaco', 226 | 'Consolas', 227 | 'Liberation Mono', 228 | 'Courier New', 229 | 'monospace', 230 | ], 231 | }, 232 | 233 | 234 | /* 235 | |----------------------------------------------------------------------------- 236 | | Text sizes https://tailwindcss.com/docs/text-sizing 237 | |----------------------------------------------------------------------------- 238 | | 239 | | Here is where you define your text sizes. Name these in whatever way 240 | | makes the most sense to you. We use size names by default, but 241 | | you're welcome to use a numeric scale or even something else 242 | | entirely. 243 | | 244 | | By default Tailwind uses the "rem" unit type for most measurements. 245 | | This allows you to set a root font size which all other sizes are 246 | | then based on. That said, you are free to use whatever units you 247 | | prefer, be it rems, ems, pixels or other. 248 | | 249 | | Class name: .text-{size} 250 | | CSS property: font-size 251 | | 252 | */ 253 | 254 | textSizes: { 255 | 'xs': '.75rem', // 12px 256 | 'sm': '.875rem', // 14px 257 | 'base': '1rem', // 16px 258 | 'lg': '1.125rem', // 18px 259 | 'xl': '1.25rem', // 20px 260 | '2xl': '1.5rem', // 24px 261 | '3xl': '1.875rem', // 30px 262 | '4xl': '2.25rem', // 36px 263 | '5xl': '3rem', // 48px 264 | }, 265 | 266 | 267 | /* 268 | |----------------------------------------------------------------------------- 269 | | Font weights https://tailwindcss.com/docs/font-weight 270 | |----------------------------------------------------------------------------- 271 | | 272 | | Here is where you define your font weights. We've provided a list of 273 | | common font weight names with their respective numeric scale values 274 | | to get you started. It's unlikely that your project will require 275 | | all of these, so we recommend removing those you don't need. 276 | | 277 | | Class name: .font-{weight} 278 | | CSS property: font-weight 279 | | 280 | */ 281 | 282 | fontWeights: { 283 | 'hairline': 100, 284 | 'thin': 200, 285 | 'light': 300, 286 | 'normal': 400, 287 | 'medium': 500, 288 | 'semibold': 600, 289 | 'bold': 700, 290 | 'extrabold': 800, 291 | 'black': 900, 292 | }, 293 | 294 | 295 | /* 296 | |----------------------------------------------------------------------------- 297 | | Leading (line height) https://tailwindcss.com/docs/line-height 298 | |----------------------------------------------------------------------------- 299 | | 300 | | Here is where you define your line height values, or as we call 301 | | them in Tailwind, leadings. 302 | | 303 | | Class name: .leading-{size} 304 | | CSS property: line-height 305 | | 306 | */ 307 | 308 | leading: { 309 | 'none': 1, 310 | 'tight': 1.25, 311 | 'normal': 1.5, 312 | 'loose': 2, 313 | }, 314 | 315 | 316 | /* 317 | |----------------------------------------------------------------------------- 318 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing 319 | |----------------------------------------------------------------------------- 320 | | 321 | | Here is where you define your letter spacing values, or as we call 322 | | them in Tailwind, tracking. 323 | | 324 | | Class name: .tracking-{size} 325 | | CSS property: letter-spacing 326 | | 327 | */ 328 | 329 | tracking: { 330 | 'tight': '-0.05em', 331 | 'normal': '0', 332 | 'wide': '0.05em', 333 | }, 334 | 335 | 336 | /* 337 | |----------------------------------------------------------------------------- 338 | | Text colors https://tailwindcss.com/docs/text-color 339 | |----------------------------------------------------------------------------- 340 | | 341 | | Here is where you define your text colors. By default these use the 342 | | color palette we defined above, however you're welcome to set these 343 | | independently if that makes sense for your project. 344 | | 345 | | Class name: .text-{color} 346 | | CSS property: color 347 | | 348 | */ 349 | 350 | textColors: colors, 351 | 352 | 353 | /* 354 | |----------------------------------------------------------------------------- 355 | | Background colors https://tailwindcss.com/docs/background-color 356 | |----------------------------------------------------------------------------- 357 | | 358 | | Here is where you define your background colors. By default these use 359 | | the color palette we defined above, however you're welcome to set 360 | | these independently if that makes sense for your project. 361 | | 362 | | Class name: .bg-{color} 363 | | CSS property: background-color 364 | | 365 | */ 366 | 367 | backgroundColors: colors, 368 | 369 | 370 | /* 371 | |----------------------------------------------------------------------------- 372 | | Background sizes https://tailwindcss.com/docs/background-size 373 | |----------------------------------------------------------------------------- 374 | | 375 | | Here is where you define your background sizes. We provide some common 376 | | values that are useful in most projects, but feel free to add other sizes 377 | | that are specific to your project here as well. 378 | | 379 | | Class name: .bg-{size} 380 | | CSS property: background-size 381 | | 382 | */ 383 | 384 | backgroundSize: { 385 | 'auto': 'auto', 386 | 'cover': 'cover', 387 | 'contain': 'contain', 388 | }, 389 | 390 | 391 | /* 392 | |----------------------------------------------------------------------------- 393 | | Border widths https://tailwindcss.com/docs/border-width 394 | |----------------------------------------------------------------------------- 395 | | 396 | | Here is where you define your border widths. Take note that border 397 | | widths require a special "default" value set as well. This is the 398 | | width that will be used when you do not specify a border width. 399 | | 400 | | Class name: .border{-side?}{-width?} 401 | | CSS property: border-width 402 | | 403 | */ 404 | 405 | borderWidths: { 406 | default: '1px', 407 | '0': '0', 408 | '2': '2px', 409 | '4': '4px', 410 | '8': '8px', 411 | }, 412 | 413 | 414 | /* 415 | |----------------------------------------------------------------------------- 416 | | Border colors https://tailwindcss.com/docs/border-color 417 | |----------------------------------------------------------------------------- 418 | | 419 | | Here is where you define your border colors. By default these use the 420 | | color palette we defined above, however you're welcome to set these 421 | | independently if that makes sense for your project. 422 | | 423 | | Take note that border colors require a special "default" value set 424 | | as well. This is the color that will be used when you do not 425 | | specify a border color. 426 | | 427 | | Class name: .border-{color} 428 | | CSS property: border-color 429 | | 430 | */ 431 | 432 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors), 433 | 434 | 435 | /* 436 | |----------------------------------------------------------------------------- 437 | | Border radius https://tailwindcss.com/docs/border-radius 438 | |----------------------------------------------------------------------------- 439 | | 440 | | Here is where you define your border radius values. If a `default` radius 441 | | is provided, it will be made available as the non-suffixed `.rounded` 442 | | utility. 443 | | 444 | | If your scale includes a `0` value to reset already rounded corners, it's 445 | | a good idea to put it first so other values are able to override it. 446 | | 447 | | Class name: .rounded{-side?}{-size?} 448 | | CSS property: border-radius 449 | | 450 | */ 451 | 452 | borderRadius: { 453 | 'none': '0', 454 | 'sm': '.125rem', 455 | default: '.25rem', 456 | 'lg': '.5rem', 457 | 'full': '9999px', 458 | }, 459 | 460 | 461 | /* 462 | |----------------------------------------------------------------------------- 463 | | Width https://tailwindcss.com/docs/width 464 | |----------------------------------------------------------------------------- 465 | | 466 | | Here is where you define your width utility sizes. These can be 467 | | percentage based, pixels, rems, or any other units. By default 468 | | we provide a sensible rem based numeric scale, a percentage 469 | | based fraction scale, plus some other common use-cases. You 470 | | can, of course, modify these values as needed. 471 | | 472 | | 473 | | It's also worth mentioning that Tailwind automatically escapes 474 | | invalid CSS class name characters, which allows you to have 475 | | awesome classes like .w-2/3. 476 | | 477 | | Class name: .w-{size} 478 | | CSS property: width 479 | | 480 | */ 481 | 482 | width: { 483 | 'auto': 'auto', 484 | 'px': '1px', 485 | '1': '0.25rem', 486 | '2': '0.5rem', 487 | '3': '0.75rem', 488 | '4': '1rem', 489 | '5': '1.25rem', 490 | '6': '1.5rem', 491 | '8': '2rem', 492 | '10': '2.5rem', 493 | '12': '3rem', 494 | '16': '4rem', 495 | '24': '6rem', 496 | '32': '8rem', 497 | '48': '12rem', 498 | '64': '16rem', 499 | '1/2': '50%', 500 | '1/3': '33.33333%', 501 | '2/3': '66.66667%', 502 | '1/4': '25%', 503 | '3/4': '75%', 504 | '1/5': '20%', 505 | '2/5': '40%', 506 | '3/5': '60%', 507 | '4/5': '80%', 508 | '1/6': '16.66667%', 509 | '5/6': '83.33333%', 510 | 'full': '100%', 511 | 'screen': '100vw', 512 | }, 513 | 514 | 515 | /* 516 | |----------------------------------------------------------------------------- 517 | | Height https://tailwindcss.com/docs/height 518 | |----------------------------------------------------------------------------- 519 | | 520 | | Here is where you define your height utility sizes. These can be 521 | | percentage based, pixels, rems, or any other units. By default 522 | | we provide a sensible rem based numeric scale plus some other 523 | | common use-cases. You can, of course, modify these values as 524 | | needed. 525 | | 526 | | Class name: .h-{size} 527 | | CSS property: height 528 | | 529 | */ 530 | 531 | height: { 532 | 'auto': 'auto', 533 | 'px': '1px', 534 | '1': '0.25rem', 535 | '2': '0.5rem', 536 | '3': '0.75rem', 537 | '4': '1rem', 538 | '5': '1.25rem', 539 | '6': '1.5rem', 540 | '8': '2rem', 541 | '10': '2.5rem', 542 | '12': '3rem', 543 | '16': '4rem', 544 | '24': '6rem', 545 | '32': '8rem', 546 | '48': '12rem', 547 | '64': '16rem', 548 | 'full': '100%', 549 | 'screen': '100vh', 550 | }, 551 | 552 | 553 | /* 554 | |----------------------------------------------------------------------------- 555 | | Minimum width https://tailwindcss.com/docs/min-width 556 | |----------------------------------------------------------------------------- 557 | | 558 | | Here is where you define your minimum width utility sizes. These can 559 | | be percentage based, pixels, rems, or any other units. We provide a 560 | | couple common use-cases by default. You can, of course, modify 561 | | these values as needed. 562 | | 563 | | Class name: .min-w-{size} 564 | | CSS property: min-width 565 | | 566 | */ 567 | 568 | minWidth: { 569 | '0': '0', 570 | 'full': '100%', 571 | }, 572 | 573 | 574 | /* 575 | |----------------------------------------------------------------------------- 576 | | Minimum height https://tailwindcss.com/docs/min-height 577 | |----------------------------------------------------------------------------- 578 | | 579 | | Here is where you define your minimum height utility sizes. These can 580 | | be percentage based, pixels, rems, or any other units. We provide a 581 | | few common use-cases by default. You can, of course, modify these 582 | | values as needed. 583 | | 584 | | Class name: .min-h-{size} 585 | | CSS property: min-height 586 | | 587 | */ 588 | 589 | minHeight: { 590 | '0': '0', 591 | 'full': '100%', 592 | 'screen': '100vh', 593 | }, 594 | 595 | 596 | /* 597 | |----------------------------------------------------------------------------- 598 | | Maximum width https://tailwindcss.com/docs/max-width 599 | |----------------------------------------------------------------------------- 600 | | 601 | | Here is where you define your maximum width utility sizes. These can 602 | | be percentage based, pixels, rems, or any other units. By default 603 | | we provide a sensible rem based scale and a "full width" size, 604 | | which is basically a reset utility. You can, of course, 605 | | modify these values as needed. 606 | | 607 | | Class name: .max-w-{size} 608 | | CSS property: max-width 609 | | 610 | */ 611 | 612 | maxWidth: { 613 | 'xs': '20rem', 614 | 'sm': '30rem', 615 | 'md': '40rem', 616 | 'lg': '50rem', 617 | 'xl': '60rem', 618 | '2xl': '70rem', 619 | '3xl': '80rem', 620 | '4xl': '90rem', 621 | '5xl': '100rem', 622 | 'full': '100%', 623 | }, 624 | 625 | 626 | /* 627 | |----------------------------------------------------------------------------- 628 | | Maximum height https://tailwindcss.com/docs/max-height 629 | |----------------------------------------------------------------------------- 630 | | 631 | | Here is where you define your maximum height utility sizes. These can 632 | | be percentage based, pixels, rems, or any other units. We provide a 633 | | couple common use-cases by default. You can, of course, modify 634 | | these values as needed. 635 | | 636 | | Class name: .max-h-{size} 637 | | CSS property: max-height 638 | | 639 | */ 640 | 641 | maxHeight: { 642 | 'full': '100%', 643 | 'screen': '100vh', 644 | }, 645 | 646 | 647 | /* 648 | |----------------------------------------------------------------------------- 649 | | Padding https://tailwindcss.com/docs/padding 650 | |----------------------------------------------------------------------------- 651 | | 652 | | Here is where you define your padding utility sizes. These can be 653 | | percentage based, pixels, rems, or any other units. By default we 654 | | provide a sensible rem based numeric scale plus a couple other 655 | | common use-cases like "1px". You can, of course, modify these 656 | | values as needed. 657 | | 658 | | Class name: .p{side?}-{size} 659 | | CSS property: padding 660 | | 661 | */ 662 | 663 | padding: { 664 | 'px': '1px', 665 | '0': '0', 666 | '1': '0.25rem', 667 | '2': '0.5rem', 668 | '3': '0.75rem', 669 | '4': '1rem', 670 | '5': '1.25rem', 671 | '6': '1.5rem', 672 | '8': '2rem', 673 | '10': '2.5rem', 674 | '12': '3rem', 675 | '16': '4rem', 676 | '20': '5rem', 677 | '24': '6rem', 678 | '32': '8rem', 679 | }, 680 | 681 | 682 | /* 683 | |----------------------------------------------------------------------------- 684 | | Margin https://tailwindcss.com/docs/margin 685 | |----------------------------------------------------------------------------- 686 | | 687 | | Here is where you define your margin utility sizes. These can be 688 | | percentage based, pixels, rems, or any other units. By default we 689 | | provide a sensible rem based numeric scale plus a couple other 690 | | common use-cases like "1px". You can, of course, modify these 691 | | values as needed. 692 | | 693 | | Class name: .m{side?}-{size} 694 | | CSS property: margin 695 | | 696 | */ 697 | 698 | margin: { 699 | 'auto': 'auto', 700 | 'px': '1px', 701 | '0': '0', 702 | '1': '0.25rem', 703 | '2': '0.5rem', 704 | '3': '0.75rem', 705 | '4': '1rem', 706 | '5': '1.25rem', 707 | '6': '1.5rem', 708 | '8': '2rem', 709 | '10': '2.5rem', 710 | '12': '3rem', 711 | '16': '4rem', 712 | '20': '5rem', 713 | '24': '6rem', 714 | '32': '8rem', 715 | }, 716 | 717 | 718 | /* 719 | |----------------------------------------------------------------------------- 720 | | Negative margin https://tailwindcss.com/docs/negative-margin 721 | |----------------------------------------------------------------------------- 722 | | 723 | | Here is where you define your negative margin utility sizes. These can 724 | | be percentage based, pixels, rems, or any other units. By default we 725 | | provide matching values to the padding scale since these utilities 726 | | generally get used together. You can, of course, modify these 727 | | values as needed. 728 | | 729 | | Class name: .-m{side?}-{size} 730 | | CSS property: margin 731 | | 732 | */ 733 | 734 | negativeMargin: { 735 | 'px': '1px', 736 | '0': '0', 737 | '1': '0.25rem', 738 | '2': '0.5rem', 739 | '3': '0.75rem', 740 | '4': '1rem', 741 | '5': '1.25rem', 742 | '6': '1.5rem', 743 | '8': '2rem', 744 | '10': '2.5rem', 745 | '12': '3rem', 746 | '16': '4rem', 747 | '20': '5rem', 748 | '24': '6rem', 749 | '32': '8rem', 750 | }, 751 | 752 | 753 | /* 754 | |----------------------------------------------------------------------------- 755 | | Shadows https://tailwindcss.com/docs/shadows 756 | |----------------------------------------------------------------------------- 757 | | 758 | | Here is where you define your shadow utilities. As you can see from 759 | | the defaults we provide, it's possible to apply multiple shadows 760 | | per utility using comma separation. 761 | | 762 | | If a `default` shadow is provided, it will be made available as the non- 763 | | suffixed `.shadow` utility. 764 | | 765 | | Class name: .shadow-{size?} 766 | | CSS property: box-shadow 767 | | 768 | */ 769 | 770 | shadows: { 771 | default: '0 2px 4px 0 rgba(0,0,0,0.10)', 772 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 773 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 774 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 775 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 776 | 'none': 'none', 777 | }, 778 | 779 | 780 | /* 781 | |----------------------------------------------------------------------------- 782 | | Z-index https://tailwindcss.com/docs/z-index 783 | |----------------------------------------------------------------------------- 784 | | 785 | | Here is where you define your z-index utility values. By default we 786 | | provide a sensible numeric scale. You can, of course, modify these 787 | | values as needed. 788 | | 789 | | Class name: .z-{index} 790 | | CSS property: z-index 791 | | 792 | */ 793 | 794 | zIndex: { 795 | 'auto': 'auto', 796 | '0': 0, 797 | '10': 10, 798 | '20': 20, 799 | '30': 30, 800 | '40': 40, 801 | '50': 50, 802 | }, 803 | 804 | 805 | /* 806 | |----------------------------------------------------------------------------- 807 | | Opacity https://tailwindcss.com/docs/opacity 808 | |----------------------------------------------------------------------------- 809 | | 810 | | Here is where you define your opacity utility values. By default we 811 | | provide a sensible numeric scale. You can, of course, modify these 812 | | values as needed. 813 | | 814 | | Class name: .opacity-{name} 815 | | CSS property: opacity 816 | | 817 | */ 818 | 819 | opacity: { 820 | '0': '0', 821 | '25': '.25', 822 | '50': '.5', 823 | '75': '.75', 824 | '100': '1', 825 | }, 826 | 827 | 828 | /* 829 | |----------------------------------------------------------------------------- 830 | | SVG fill https://tailwindcss.com/docs/svg 831 | |----------------------------------------------------------------------------- 832 | | 833 | | Here is where you define your SVG fill colors. By default we just provide 834 | | `fill-current` which sets the fill to the current text color. This lets you 835 | | specify a fill color using existing text color utilities and helps keep the 836 | | generated CSS file size down. 837 | | 838 | | Class name: .fill-{name} 839 | | CSS property: fill 840 | | 841 | */ 842 | 843 | svgFill: { 844 | 'current': 'currentColor', 845 | }, 846 | 847 | 848 | /* 849 | |----------------------------------------------------------------------------- 850 | | SVG stroke https://tailwindcss.com/docs/svg 851 | |----------------------------------------------------------------------------- 852 | | 853 | | Here is where you define your SVG stroke colors. By default we just provide 854 | | `stroke-current` which sets the stroke to the current text color. This lets 855 | | you specify a stroke color using existing text color utilities and helps 856 | | keep the generated CSS file size down. 857 | | 858 | | Class name: .stroke-{name} 859 | | CSS property: stroke 860 | | 861 | */ 862 | 863 | svgStroke: { 864 | 'current': 'currentColor', 865 | }, 866 | 867 | 868 | /* 869 | |----------------------------------------------------------------------------- 870 | | Modules https://tailwindcss.com/docs/configuration#modules 871 | |----------------------------------------------------------------------------- 872 | | 873 | | Here is where you control which modules are generated and what variants are 874 | | generated for each of those modules. 875 | | 876 | | Currently supported variants: 877 | | - responsive 878 | | - hover 879 | | - focus 880 | | - focus-within 881 | | - active 882 | | - group-hover 883 | | 884 | | To disable a module completely, use `false` instead of an array. 885 | | 886 | */ 887 | 888 | modules: { 889 | appearance: ['responsive'], 890 | backgroundAttachment: ['responsive'], 891 | backgroundColors: ['responsive', 'hover', 'focus'], 892 | backgroundPosition: ['responsive'], 893 | backgroundRepeat: ['responsive'], 894 | backgroundSize: ['responsive'], 895 | borderCollapse: [], 896 | borderColors: ['responsive', 'hover', 'focus'], 897 | borderRadius: ['responsive'], 898 | borderStyle: ['responsive'], 899 | borderWidths: ['responsive'], 900 | cursor: ['responsive'], 901 | display: ['responsive'], 902 | flexbox: ['responsive'], 903 | float: ['responsive'], 904 | fonts: ['responsive'], 905 | fontWeights: ['responsive', 'hover', 'focus'], 906 | height: ['responsive'], 907 | leading: ['responsive'], 908 | lists: ['responsive'], 909 | margin: ['responsive'], 910 | maxHeight: ['responsive'], 911 | maxWidth: ['responsive'], 912 | minHeight: ['responsive'], 913 | minWidth: ['responsive'], 914 | negativeMargin: ['responsive'], 915 | objectFit: false, 916 | objectPosition: false, 917 | opacity: ['responsive'], 918 | outline: ['focus'], 919 | overflow: ['responsive'], 920 | padding: ['responsive'], 921 | pointerEvents: ['responsive'], 922 | position: ['responsive'], 923 | resize: ['responsive'], 924 | shadows: ['responsive', 'hover', 'focus'], 925 | svgFill: [], 926 | svgStroke: [], 927 | tableLayout: ['responsive'], 928 | textAlign: ['responsive'], 929 | textColors: ['responsive', 'hover', 'focus'], 930 | textSizes: ['responsive'], 931 | textStyle: ['responsive', 'hover', 'focus'], 932 | tracking: ['responsive'], 933 | userSelect: ['responsive'], 934 | verticalAlign: ['responsive'], 935 | visibility: ['responsive'], 936 | whitespace: ['responsive'], 937 | width: ['responsive'], 938 | zIndex: ['responsive'], 939 | }, 940 | 941 | 942 | /* 943 | |----------------------------------------------------------------------------- 944 | | Plugins https://tailwindcss.com/docs/plugins 945 | |----------------------------------------------------------------------------- 946 | | 947 | | Here is where you can register any plugins you'd like to use in your 948 | | project. Tailwind's built-in `container` plugin is enabled by default to 949 | | give you a Bootstrap-style responsive container component out of the box. 950 | | 951 | | Be sure to view the complete plugin documentation to learn more about how 952 | | the plugin system works. 953 | | 954 | */ 955 | 956 | plugins: [ 957 | require('tailwindcss/plugins/container')({ 958 | // center: true, 959 | // padding: '1rem', 960 | }), 961 | ], 962 | 963 | 964 | /* 965 | |----------------------------------------------------------------------------- 966 | | Advanced Options https://tailwindcss.com/docs/configuration#options 967 | |----------------------------------------------------------------------------- 968 | | 969 | | Here is where you can tweak advanced configuration options. We recommend 970 | | leaving these options alone unless you absolutely need to change them. 971 | | 972 | */ 973 | 974 | options: { 975 | prefix: '', 976 | important: false, 977 | separator: ':', 978 | }, 979 | 980 | } 981 | --------------------------------------------------------------------------------