# Tailwind Colors In JS The colors in tailwind CSS are really nice and I always find myself copying them into my css in js projects so I have put them into a package so I can install it from npm and not copy paste. If you find it useful thats cool too. ## Getting started To install ``` yarn add tailwind-colors ``` ```js import colors from 'tailwind-colors'; console.log(colors.red[500]); // #ed8936 ``` | gray | Hex | |---|---| | 100 | ![#f7fafc](https://placehold.it/15/f7fafc/000000?text=+) | | 200 | ![#edf2f7](https://placehold.it/15/edf2f7/000000?text=+) | | 300 | ![#e2e8f0](https://placehold.it/15/e2e8f0/000000?text=+) | | 400 | ![#cbd5e0](https://placehold.it/15/cbd5e0/000000?text=+) | | 500 | ![#a0aec0](https://placehold.it/15/a0aec0/000000?text=+) | | 600 | ![#718096](https://placehold.it/15/718096/000000?text=+) | | 700 | ![#4a5568](https://placehold.it/15/4a5568/000000?text=+) | | 800 | ![#2d3748](https://placehold.it/15/2d3748/000000?text=+) | | 900 | ![#1a202c](https://placehold.it/15/1a202c/000000?text=+) | | red | Hex | |---|---| | 100 | ![#fff5f5](https://placehold.it/15/fff5f5/000000?text=+) | | 200 | ![#fed7d7](https://placehold.it/15/fed7d7/000000?text=+) | | 300 | ![#feb2b2](https://placehold.it/15/feb2b2/000000?text=+) | | 400 | ![#fc8181](https://placehold.it/15/fc8181/000000?text=+) | | 500 | ![#f56565](https://placehold.it/15/f56565/000000?text=+) | | 600 | ![#e53e3e](https://placehold.it/15/e53e3e/000000?text=+) | | 700 | ![#c53030](https://placehold.it/15/c53030/000000?text=+) | | 800 | ![#9b2c2c](https://placehold.it/15/9b2c2c/000000?text=+) | | 900 | ![#742a2a](https://placehold.it/15/742a2a/000000?text=+) | | orange | Hex | |---|---| | 100 | ![#fffaf0](https://placehold.it/15/fffaf0/000000?text=+) | | 200 | ![#feebc8](https://placehold.it/15/feebc8/000000?text=+) | | 300 | ![#fbd38d](https://placehold.it/15/fbd38d/000000?text=+) | | 400 | ![#f6ad55](https://placehold.it/15/f6ad55/000000?text=+) | | 500 | ![#ed8936](https://placehold.it/15/ed8936/000000?text=+) | | 600 | ![#dd6b20](https://placehold.it/15/dd6b20/000000?text=+) | | 700 | ![#c05621](https://placehold.it/15/c05621/000000?text=+) | | 800 | ![#9c4221](https://placehold.it/15/9c4221/000000?text=+) | | 900 | ![#7b341e](https://placehold.it/15/7b341e/000000?text=+) | | yellow | Hex | |---|---| | 100 | ![#fffff0](https://placehold.it/15/fffff0/000000?text=+) | | 200 | ![#fefcbf](https://placehold.it/15/fefcbf/000000?text=+) | | 300 | ![#faf089](https://placehold.it/15/faf089/000000?text=+) | | 400 | ![#f6e05e](https://placehold.it/15/f6e05e/000000?text=+) | | 500 | ![#ecc94b](https://placehold.it/15/ecc94b/000000?text=+) | | 600 | ![#d69e2e](https://placehold.it/15/d69e2e/000000?text=+) | | 700 | ![#b7791f](https://placehold.it/15/b7791f/000000?text=+) | | 800 | ![#975a16](https://placehold.it/15/975a16/000000?text=+) | | 900 | ![#744210](https://placehold.it/15/744210/000000?text=+) | | green | Hex | |---|---| | 100 | ![#f0fff4](https://placehold.it/15/f0fff4/000000?text=+) | | 200 | ![#c6f6d5](https://placehold.it/15/c6f6d5/000000?text=+) | | 300 | ![#9ae6b4](https://placehold.it/15/9ae6b4/000000?text=+) | | 400 | ![#68d391](https://placehold.it/15/68d391/000000?text=+) | | 500 | ![#48bb78](https://placehold.it/15/48bb78/000000?text=+) | | 600 | ![#38a169](https://placehold.it/15/38a169/000000?text=+) | | 700 | ![#2f855a](https://placehold.it/15/2f855a/000000?text=+) | | 800 | ![#276749](https://placehold.it/15/276749/000000?text=+) | | 900 | ![#22543d](https://placehold.it/15/22543d/000000?text=+) | | teal | Hex | |---|---| | 100 | ![#e6fffa](https://placehold.it/15/e6fffa/000000?text=+) | | 200 | ![#b2f5ea](https://placehold.it/15/b2f5ea/000000?text=+) | | 300 | ![#81e6d9](https://placehold.it/15/81e6d9/000000?text=+) | | 400 | ![#4fd1c5](https://placehold.it/15/4fd1c5/000000?text=+) | | 500 | ![#38b2ac](https://placehold.it/15/38b2ac/000000?text=+) | | 600 | ![#319795](https://placehold.it/15/319795/000000?text=+) | | 700 | ![#2c7a7b](https://placehold.it/15/2c7a7b/000000?text=+) | | 800 | ![#285e61](https://placehold.it/15/285e61/000000?text=+) | | 900 | ![#234e52](https://placehold.it/15/234e52/000000?text=+) | | blue | Hex | |---|---| | 100 | ![#ebf8ff](https://placehold.it/15/ebf8ff/000000?text=+) | | 200 | ![#bee3f8](https://placehold.it/15/bee3f8/000000?text=+) | | 300 | ![#90cdf4](https://placehold.it/15/90cdf4/000000?text=+) | | 400 | ![#63b3ed](https://placehold.it/15/63b3ed/000000?text=+) | | 500 | ![#4299e1](https://placehold.it/15/4299e1/000000?text=+) | | 600 | ![#3182ce](https://placehold.it/15/3182ce/000000?text=+) | | 700 | ![#2b6cb0](https://placehold.it/15/2b6cb0/000000?text=+) | | 800 | ![#2c5282](https://placehold.it/15/2c5282/000000?text=+) | | 900 | ![#2a4365](https://placehold.it/15/2a4365/000000?text=+) | | indigo | Hex | |---|---| | 100 | ![#ebf4ff](https://placehold.it/15/ebf4ff/000000?text=+) | | 200 | ![#c3dafe](https://placehold.it/15/c3dafe/000000?text=+) | | 300 | ![#a3bffa](https://placehold.it/15/a3bffa/000000?text=+) | | 400 | ![#7f9cf5](https://placehold.it/15/7f9cf5/000000?text=+) | | 500 | ![#667eea](https://placehold.it/15/667eea/000000?text=+) | | 600 | ![#5a67d8](https://placehold.it/15/5a67d8/000000?text=+) | | 700 | ![#4c51bf](https://placehold.it/15/4c51bf/000000?text=+) | | 800 | ![#434190](https://placehold.it/15/434190/000000?text=+) | | 900 | ![#3c366b](https://placehold.it/15/3c366b/000000?text=+) | | purple | Hex | |---|---| | 100 | ![#faf5ff](https://placehold.it/15/faf5ff/000000?text=+) | | 200 | ![#e9d8fd](https://placehold.it/15/e9d8fd/000000?text=+) | | 300 | ![#d6bcfa](https://placehold.it/15/d6bcfa/000000?text=+) | | 400 | ![#b794f4](https://placehold.it/15/b794f4/000000?text=+) | | 500 | ![#9f7aea](https://placehold.it/15/9f7aea/000000?text=+) | | 600 | ![#805ad5](https://placehold.it/15/805ad5/000000?text=+) | | 700 | ![#6b46c1](https://placehold.it/15/6b46c1/000000?text=+) | | 800 | ![#553c9a](https://placehold.it/15/553c9a/000000?text=+) | | 900 | ![#44337a](https://placehold.it/15/44337a/000000?text=+) | | pink | Hex | |---|---| | 100 | ![#fff5f7](https://placehold.it/15/fff5f7/000000?text=+) | | 200 | ![#fed7e2](https://placehold.it/15/fed7e2/000000?text=+) | | 300 | ![#fbb6ce](https://placehold.it/15/fbb6ce/000000?text=+) | | 400 | ![#f687b3](https://placehold.it/15/f687b3/000000?text=+) | | 500 | ![#ed64a6](https://placehold.it/15/ed64a6/000000?text=+) | | 600 | ![#d53f8c](https://placehold.it/15/d53f8c/000000?text=+) | | 700 | ![#b83280](https://placehold.it/15/b83280/000000?text=+) | | 800 | ![#97266d](https://placehold.it/15/97266d/000000?text=+) | | 900 | ![#702459](https://placehold.it/15/702459/000000?text=+) | | Misc | Hex | |---|---| | black | ![#000](https://placehold.it/15/000/000000?text=+) | | white | ![#fff](https://placehold.it/15/fff/000000?text=+) | ## Acknowledgments All credit goes to [@steveschoger](https://twitter.com/steveschoger) and [@adamwathan](https://twitter.com/adamwathan) who made tailwind css.