├── .gitignore ├── README.md ├── contract ├── contracts │ └── verifySignature.sol ├── flatten.sol ├── hardhat.config.js ├── package-lock.json └── package.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── ContentComponent.js ├── index.css ├── index.js └── logo.svg └── tailwind.config.js /.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 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .env 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Demo of on-chain verification 2 | -------------------------------------------------------------------------------- /contract/contracts/verifySignature.sol: -------------------------------------------------------------------------------- 1 | // SPDX-License-Identifier: MIT 2 | pragma solidity ^0.8.0; 3 | 4 | import "@openzeppelin/contracts/utils/cryptography/ECDSA.sol"; 5 | 6 | contract SignatureDemo { 7 | address owner; 8 | using ECDSA for bytes32; 9 | 10 | constructor() { 11 | owner = msg.sender; 12 | } 13 | 14 | function isMessageValid(bytes memory _signature) 15 | public 16 | view 17 | returns (address, bool) 18 | { 19 | bytes32 messagehash = keccak256( 20 | abi.encodePacked(address(this), msg.sender) 21 | ); 22 | address signer = messagehash.toEthSignedMessageHash().recover( 23 | _signature 24 | ); 25 | 26 | if (owner == signer) { 27 | return (signer, true); 28 | } else { 29 | return (signer, false); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /contract/flatten.sol: -------------------------------------------------------------------------------- 1 | // Sources flattened with hardhat v2.8.2 https://hardhat.org 2 | 3 | // File @openzeppelin/contracts/utils/Strings.sol@v4.4.2 4 | 5 | // SPDX-License-Identifier: MIT 6 | // OpenZeppelin Contracts v4.4.1 (utils/Strings.sol) 7 | 8 | pragma solidity ^0.8.0; 9 | 10 | /** 11 | * @dev String operations. 12 | */ 13 | library Strings { 14 | bytes16 private constant _HEX_SYMBOLS = "0123456789abcdef"; 15 | 16 | /** 17 | * @dev Converts a `uint256` to its ASCII `string` decimal representation. 18 | */ 19 | function toString(uint256 value) internal pure returns (string memory) { 20 | // Inspired by OraclizeAPI's implementation - MIT licence 21 | // https://github.com/oraclize/ethereum-api/blob/b42146b063c7d6ee1358846c198246239e9360e8/oraclizeAPI_0.4.25.sol 22 | 23 | if (value == 0) { 24 | return "0"; 25 | } 26 | uint256 temp = value; 27 | uint256 digits; 28 | while (temp != 0) { 29 | digits++; 30 | temp /= 10; 31 | } 32 | bytes memory buffer = new bytes(digits); 33 | while (value != 0) { 34 | digits -= 1; 35 | buffer[digits] = bytes1(uint8(48 + uint256(value % 10))); 36 | value /= 10; 37 | } 38 | return string(buffer); 39 | } 40 | 41 | /** 42 | * @dev Converts a `uint256` to its ASCII `string` hexadecimal representation. 43 | */ 44 | function toHexString(uint256 value) internal pure returns (string memory) { 45 | if (value == 0) { 46 | return "0x00"; 47 | } 48 | uint256 temp = value; 49 | uint256 length = 0; 50 | while (temp != 0) { 51 | length++; 52 | temp >>= 8; 53 | } 54 | return toHexString(value, length); 55 | } 56 | 57 | /** 58 | * @dev Converts a `uint256` to its ASCII `string` hexadecimal representation with fixed length. 59 | */ 60 | function toHexString(uint256 value, uint256 length) 61 | internal 62 | pure 63 | returns (string memory) 64 | { 65 | bytes memory buffer = new bytes(2 * length + 2); 66 | buffer[0] = "0"; 67 | buffer[1] = "x"; 68 | for (uint256 i = 2 * length + 1; i > 1; --i) { 69 | buffer[i] = _HEX_SYMBOLS[value & 0xf]; 70 | value >>= 4; 71 | } 72 | require(value == 0, "Strings: hex length insufficient"); 73 | return string(buffer); 74 | } 75 | } 76 | 77 | // File @openzeppelin/contracts/utils/cryptography/ECDSA.sol@v4.4.2 78 | 79 | // OpenZeppelin Contracts v4.4.1 (utils/cryptography/ECDSA.sol) 80 | 81 | pragma solidity ^0.8.0; 82 | 83 | /** 84 | * @dev Elliptic Curve Digital Signature Algorithm (ECDSA) operations. 85 | * 86 | * These functions can be used to verify that a message was signed by the holder 87 | * of the private keys of a given address. 88 | */ 89 | library ECDSA { 90 | enum RecoverError { 91 | NoError, 92 | InvalidSignature, 93 | InvalidSignatureLength, 94 | InvalidSignatureS, 95 | InvalidSignatureV 96 | } 97 | 98 | function _throwError(RecoverError error) private pure { 99 | if (error == RecoverError.NoError) { 100 | return; // no error: do nothing 101 | } else if (error == RecoverError.InvalidSignature) { 102 | revert("ECDSA: invalid signature"); 103 | } else if (error == RecoverError.InvalidSignatureLength) { 104 | revert("ECDSA: invalid signature length"); 105 | } else if (error == RecoverError.InvalidSignatureS) { 106 | revert("ECDSA: invalid signature 's' value"); 107 | } else if (error == RecoverError.InvalidSignatureV) { 108 | revert("ECDSA: invalid signature 'v' value"); 109 | } 110 | } 111 | 112 | /** 113 | * @dev Returns the address that signed a hashed message (`hash`) with 114 | * `signature` or error string. This address can then be used for verification purposes. 115 | * 116 | * The `ecrecover` EVM opcode allows for malleable (non-unique) signatures: 117 | * this function rejects them by requiring the `s` value to be in the lower 118 | * half order, and the `v` value to be either 27 or 28. 119 | * 120 | * IMPORTANT: `hash` _must_ be the result of a hash operation for the 121 | * verification to be secure: it is possible to craft signatures that 122 | * recover to arbitrary addresses for non-hashed data. A safe way to ensure 123 | * this is by receiving a hash of the original message (which may otherwise 124 | * be too long), and then calling {toEthSignedMessageHash} on it. 125 | * 126 | * Documentation for signature generation: 127 | * - with https://web3js.readthedocs.io/en/v1.3.4/web3-eth-accounts.html#sign[Web3.js] 128 | * - with https://docs.ethers.io/v5/api/signer/#Signer-signMessage[ethers] 129 | * 130 | * _Available since v4.3._ 131 | */ 132 | function tryRecover(bytes32 hash, bytes memory signature) 133 | internal 134 | pure 135 | returns (address, RecoverError) 136 | { 137 | // Check the signature length 138 | // - case 65: r,s,v signature (standard) 139 | // - case 64: r,vs signature (cf https://eips.ethereum.org/EIPS/eip-2098) _Available since v4.1._ 140 | if (signature.length == 65) { 141 | bytes32 r; 142 | bytes32 s; 143 | uint8 v; 144 | // ecrecover takes the signature parameters, and the only way to get them 145 | // currently is to use assembly. 146 | assembly { 147 | r := mload(add(signature, 0x20)) 148 | s := mload(add(signature, 0x40)) 149 | v := byte(0, mload(add(signature, 0x60))) 150 | } 151 | return tryRecover(hash, v, r, s); 152 | } else if (signature.length == 64) { 153 | bytes32 r; 154 | bytes32 vs; 155 | // ecrecover takes the signature parameters, and the only way to get them 156 | // currently is to use assembly. 157 | assembly { 158 | r := mload(add(signature, 0x20)) 159 | vs := mload(add(signature, 0x40)) 160 | } 161 | return tryRecover(hash, r, vs); 162 | } else { 163 | return (address(0), RecoverError.InvalidSignatureLength); 164 | } 165 | } 166 | 167 | /** 168 | * @dev Returns the address that signed a hashed message (`hash`) with 169 | * `signature`. This address can then be used for verification purposes. 170 | * 171 | * The `ecrecover` EVM opcode allows for malleable (non-unique) signatures: 172 | * this function rejects them by requiring the `s` value to be in the lower 173 | * half order, and the `v` value to be either 27 or 28. 174 | * 175 | * IMPORTANT: `hash` _must_ be the result of a hash operation for the 176 | * verification to be secure: it is possible to craft signatures that 177 | * recover to arbitrary addresses for non-hashed data. A safe way to ensure 178 | * this is by receiving a hash of the original message (which may otherwise 179 | * be too long), and then calling {toEthSignedMessageHash} on it. 180 | */ 181 | function recover(bytes32 hash, bytes memory signature) 182 | internal 183 | pure 184 | returns (address) 185 | { 186 | (address recovered, RecoverError error) = tryRecover(hash, signature); 187 | _throwError(error); 188 | return recovered; 189 | } 190 | 191 | /** 192 | * @dev Overload of {ECDSA-tryRecover} that receives the `r` and `vs` short-signature fields separately. 193 | * 194 | * See https://eips.ethereum.org/EIPS/eip-2098[EIP-2098 short signatures] 195 | * 196 | * _Available since v4.3._ 197 | */ 198 | function tryRecover( 199 | bytes32 hash, 200 | bytes32 r, 201 | bytes32 vs 202 | ) internal pure returns (address, RecoverError) { 203 | bytes32 s; 204 | uint8 v; 205 | assembly { 206 | s := and( 207 | vs, 208 | 0x7fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 209 | ) 210 | v := add(shr(255, vs), 27) 211 | } 212 | return tryRecover(hash, v, r, s); 213 | } 214 | 215 | /** 216 | * @dev Overload of {ECDSA-recover} that receives the `r and `vs` short-signature fields separately. 217 | * 218 | * _Available since v4.2._ 219 | */ 220 | function recover( 221 | bytes32 hash, 222 | bytes32 r, 223 | bytes32 vs 224 | ) internal pure returns (address) { 225 | (address recovered, RecoverError error) = tryRecover(hash, r, vs); 226 | _throwError(error); 227 | return recovered; 228 | } 229 | 230 | /** 231 | * @dev Overload of {ECDSA-tryRecover} that receives the `v`, 232 | * `r` and `s` signature fields separately. 233 | * 234 | * _Available since v4.3._ 235 | */ 236 | function tryRecover( 237 | bytes32 hash, 238 | uint8 v, 239 | bytes32 r, 240 | bytes32 s 241 | ) internal pure returns (address, RecoverError) { 242 | // EIP-2 still allows signature malleability for ecrecover(). Remove this possibility and make the signature 243 | // unique. Appendix F in the Ethereum Yellow paper (https://ethereum.github.io/yellowpaper/paper.pdf), defines 244 | // the valid range for s in (301): 0 < s < secp256k1n ÷ 2 + 1, and for v in (302): v ∈ {27, 28}. Most 245 | // signatures from current libraries generate a unique signature with an s-value in the lower half order. 246 | // 247 | // If your library generates malleable signatures, such as s-values in the upper range, calculate a new s-value 248 | // with 0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEBAAEDCE6AF48A03BBFD25E8CD0364141 - s1 and flip v from 27 to 28 or 249 | // vice versa. If your library also generates signatures with 0/1 for v instead 27/28, add 27 to v to accept 250 | // these malleable signatures as well. 251 | if ( 252 | uint256(s) > 253 | 0x7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF5D576E7357A4501DDFE92F46681B20A0 254 | ) { 255 | return (address(0), RecoverError.InvalidSignatureS); 256 | } 257 | if (v != 27 && v != 28) { 258 | return (address(0), RecoverError.InvalidSignatureV); 259 | } 260 | 261 | // If the signature is valid (and not malleable), return the signer address 262 | address signer = ecrecover(hash, v, r, s); 263 | if (signer == address(0)) { 264 | return (address(0), RecoverError.InvalidSignature); 265 | } 266 | 267 | return (signer, RecoverError.NoError); 268 | } 269 | 270 | /** 271 | * @dev Overload of {ECDSA-recover} that receives the `v`, 272 | * `r` and `s` signature fields separately. 273 | */ 274 | function recover( 275 | bytes32 hash, 276 | uint8 v, 277 | bytes32 r, 278 | bytes32 s 279 | ) internal pure returns (address) { 280 | (address recovered, RecoverError error) = tryRecover(hash, v, r, s); 281 | _throwError(error); 282 | return recovered; 283 | } 284 | 285 | /** 286 | * @dev Returns an Ethereum Signed Message, created from a `hash`. This 287 | * produces hash corresponding to the one signed with the 288 | * https://eth.wiki/json-rpc/API#eth_sign[`eth_sign`] 289 | * JSON-RPC method as part of EIP-191. 290 | * 291 | * See {recover}. 292 | */ 293 | function toEthSignedMessageHash(bytes32 hash) 294 | internal 295 | pure 296 | returns (bytes32) 297 | { 298 | // 32 is the length in bytes of hash, 299 | // enforced by the type signature above 300 | return 301 | keccak256( 302 | abi.encodePacked("\x19Ethereum Signed Message:\n32", hash) 303 | ); 304 | } 305 | 306 | /** 307 | * @dev Returns an Ethereum Signed Message, created from `s`. This 308 | * produces hash corresponding to the one signed with the 309 | * https://eth.wiki/json-rpc/API#eth_sign[`eth_sign`] 310 | * JSON-RPC method as part of EIP-191. 311 | * 312 | * See {recover}. 313 | */ 314 | function toEthSignedMessageHash(bytes memory s) 315 | internal 316 | pure 317 | returns (bytes32) 318 | { 319 | return 320 | keccak256( 321 | abi.encodePacked( 322 | "\x19Ethereum Signed Message:\n", 323 | Strings.toString(s.length), 324 | s 325 | ) 326 | ); 327 | } 328 | 329 | /** 330 | * @dev Returns an Ethereum Signed Typed Data, created from a 331 | * `domainSeparator` and a `structHash`. This produces hash corresponding 332 | * to the one signed with the 333 | * https://eips.ethereum.org/EIPS/eip-712[`eth_signTypedData`] 334 | * JSON-RPC method as part of EIP-712. 335 | * 336 | * See {recover}. 337 | */ 338 | function toTypedDataHash(bytes32 domainSeparator, bytes32 structHash) 339 | internal 340 | pure 341 | returns (bytes32) 342 | { 343 | return 344 | keccak256( 345 | abi.encodePacked("\x19\x01", domainSeparator, structHash) 346 | ); 347 | } 348 | } 349 | 350 | // File contracts/verifySignature.sol 351 | 352 | pragma solidity ^0.8.0; 353 | 354 | contract SignatureDemo { 355 | address owner; 356 | using ECDSA for bytes32; 357 | 358 | constructor() { 359 | owner = msg.sender; 360 | } 361 | 362 | function isMessageValid(bytes memory _signature) 363 | public 364 | view 365 | returns (address, bool) 366 | { 367 | bytes32 messagehash = keccak256( 368 | abi.encodePacked(address(this), msg.sender) 369 | ); 370 | address signer = messagehash.toEthSignedMessageHash().recover( 371 | _signature 372 | ); 373 | 374 | if (owner == signer) { 375 | return (signer, true); 376 | } else { 377 | return (signer, false); 378 | } 379 | } 380 | } 381 | -------------------------------------------------------------------------------- /contract/hardhat.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type import('hardhat/config').HardhatUserConfig 3 | */ 4 | module.exports = { 5 | solidity: '0.8.4', 6 | } 7 | -------------------------------------------------------------------------------- /contract/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hardhat-project", 3 | "dependencies": { 4 | "@openzeppelin/contracts": "^4.4.2", 5 | "hardhat": "^2.8.2" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "on-chain-signature-verification", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@web3-react/core": "^6.1.9", 10 | "@web3-react/injected-connector": "^6.0.7", 11 | "ethers": "^5.5.3", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-scripts": "5.0.0", 15 | "web-vitals": "^2.1.3" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "^10.4.2", 43 | "postcss": "^8.4.5", 44 | "tailwindcss": "^3.0.15" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a3994288/signature-verification-demo/4f0570026f84a84ee8714f088476dfea10fabd04/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a3994288/signature-verification-demo/4f0570026f84a84ee8714f088476dfea10fabd04/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/a3994288/signature-verification-demo/4f0570026f84a84ee8714f088476dfea10fabd04/public/logo512.png -------------------------------------------------------------------------------- /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 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Web3ReactProvider } from '@web3-react/core' 2 | import { Web3Provider } from '@ethersproject/providers' 3 | import ContentComponent from './ContentComponent' 4 | function App() { 5 | const getLibrary = (provider) => { 6 | const library = new Web3Provider(provider, 'any') 7 | library.pollingInterval = 15000 8 | return library 9 | } 10 | 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /src/ContentComponent.js: -------------------------------------------------------------------------------- 1 | import { useWeb3React } from '@web3-react/core' 2 | import { InjectedConnector } from '@web3-react/injected-connector' 3 | import { ethers } from 'ethers' 4 | const ContentComponent = () => { 5 | const { activate, deactivate, library, account } = useWeb3React() 6 | const injected = new InjectedConnector({ 7 | supportedChainIds: [1, 3, 4, 5, 42], 8 | }) 9 | 10 | const onConnectClicked = async () => { 11 | try { 12 | await activate(injected) 13 | } catch (ex) { 14 | console.log(ex) 15 | } 16 | } 17 | 18 | const onDisconnectClicked = () => { 19 | try { 20 | deactivate() 21 | } catch (ex) { 22 | console.log(ex) 23 | } 24 | } 25 | 26 | const onMetamaskSignClicked = async () => { 27 | // Note: messageHash is a string, that is 66-bytes long, to sign the 28 | // binary value, we must convert it to the 32 byte Array that 29 | // the string represents 30 | // 31 | // i.e. 32 | // // 66-byte string 33 | // "0x592fa743889fc7f92ac2a37bb1f5ba1daf2a5c84741ca0e0061d243a2e6707ba" 34 | // 35 | // ... vs ... 36 | // 37 | // // 32 entry Uint8Array 38 | // [ 89, 47, 167, 67, 136, 159, 199, 249, 42, 194, 163, 39 | // 123, 177, 245, 186, 29, 175, 42, 92, 132, 116, 28, 40 | // 160, 224, 6, 29, 36, 58, 46, 103, 7, 186] 41 | 42 | const message = ethers.utils.solidityKeccak256( 43 | ['address', 'address'], 44 | [ 45 | '0x232FCe96d389B781f2395626a65B27c42BB8FF97', 46 | '0xaEc4ACBA2920cE034402Bb2d330008fa69dDa602', 47 | ], 48 | ) 49 | console.log(message) 50 | const arrayifyMessage = ethers.utils.arrayify(message) 51 | console.log(arrayifyMessage) 52 | const flatSignature = await library.getSigner().signMessage(arrayifyMessage) 53 | console.log(flatSignature) 54 | } 55 | 56 | const onPrivateKeySignClicked = async () => { 57 | const message = ethers.utils.solidityKeccak256( 58 | ['address', 'address'], 59 | [ 60 | '0x232FCe96d389B781f2395626a65B27c42BB8FF97', 61 | '0xaEc4ACBA2920cE034402Bb2d330008fa69dDa602', 62 | ], 63 | ) 64 | console.log(message) 65 | const arrayifyMessage = ethers.utils.arrayify(message) 66 | console.log(arrayifyMessage) 67 | const flatSignature = await new ethers.Wallet( 68 | process.env.REACT_APP_PRIVATE_KEY, 69 | ).signMessage(arrayifyMessage) 70 | console.log(flatSignature) 71 | } 72 | return ( 73 |
74 |
75 | 81 | 87 |
88 |
Account: {account || 'NOT CONNECTED'}
89 |
90 | 96 | 97 | 103 |
104 |
105 | ) 106 | } 107 | export default ContentComponent 108 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render(, document.getElementById('root')) 7 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ['./src/**/*.{js,jsx,ts,tsx}'], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | } 8 | --------------------------------------------------------------------------------