{"_id":"@bamya/cra-template-tailwind","_rev":"4-01741ccc50588fbb390b9f3133fac583","name":"@bamya/cra-template-tailwind","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bamya/cra-template-tailwind","version":"1.0.0","keywords":["react","tailwind","wesbos","eslint","create-react-app","template"],"main":"template.json","description":"The base template for Create React App with Tailwind CSS and Wesbos ESLint config.","repository":{"type":"git","url":"git+https://github.com/hilalh/cra-template-tailwind.git"},"license":"MIT","engines":{"node":">=8"},"bugs":{"url":"https://github.com/hilalh/cra-template-tailwind/issues"},"gitHead":"e5d9240d243b5fdf5ffc1cb0eeb9d3dc4a3eb8d3","homepage":"https://github.com/hilalh/cra-template-tailwind#readme","_id":"@bamya/cra-template-tailwind@1.0.0","_nodeVersion":"13.3.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-QFAix8JiMIYdKs4l4vQpJMd7SB0M7RI2T5jGkpXA1b28rGzvkEgrOb8NwDDusegWxLZpmzmmC37bhs7oaRQrkA==","shasum":"ee1b6986fe136990dd07c064b19c915e49234224","tarball":"https://registry.npmjs.org/@bamya/cra-template-tailwind/-/cra-template-tailwind-1.0.0.tgz","fileCount":24,"unpackedSize":1945673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJertDCCRA9TVsSAnZWagAAIFsP/3f/gMnOxfKTxzAP229Q\nfjgS/YtqghOliTr7GFoj7HS0GOLOTZVYuAatmTlMMa42vPybY8SY+yTdCNZ8\nW4dYt+KJC8M+F+AZd3SqRxjRXdj0tcY+yFQctM8fiujMBtkH3Y0BLO4hTKck\nbRkphO38CyruYGCddA01qa43prtTHOX3gws8C+iBRNTCc2CYLF7eTAuxz2wz\nEDryw7Ww72mW0GtuERfQLU5CTcF/3J14sgtih/9jVvAXyue9vOEIiNryEtVx\nVDPtnJabHewF4fL9osr4BhUE2+7tnudAJHedn3FfTJNar8ai2iMN3Jih2nSq\n3KP+hg1W54EDyaxEHKAgVAT2vRn+XJFm9iFn6GLf2tRs/i873KA9zsi+Iao4\nc53D+IrbAczQL7+/ibkL7Yz8xb3j5u9xW/ZZ47ArjXCnV0ittJRqeo7Kd2zT\n3igTz0cPPHZccCyV9e83uLSoqxQNzbBJoHoLnifxX3CnkrOvHNN3ycSRSG72\nj0F7GZybEjpPn0xnWWA79Q/BCMSj1VEv6jskI2Uo7ZAbCYKY8bBXqWkg3kg4\nSUfimRSA+F4/X9PKlbeMGoPkDeZdsaL253jfPoZiflCHLzqxIfp3Rcl0pDVz\nmXnlISqt7D+ic7rCjC6l8t3mMiVslAqIu2QX7shusG/JavwRukipyA7VDqds\nJL9l\r\n=OGh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmXJEkPQfpUx7WAV5074CccL34eTR+A0xhqMhqr1yIAAiEA37e8e1BHRa5l7+QAULuf5QKHZ5EhcDgIYAyq21nC8ws="}]},"maintainers":[{"name":"hilalh","email":"dev@bamya.io"}],"_npmUser":{"name":"hilalh","email":"dev@bamya.io"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cra-template-tailwind_1.0.0_1588515009557_0.5196325004320483"},"_hasShrinkwrap":false},"1.0.1":{"name":"@bamya/cra-template-tailwind","version":"1.0.1","keywords":["react","tailwind","wesbos","eslint","create-react-app","template"],"main":"template.json","description":"The base template for Create React App with Tailwind CSS and Wesbos ESLint config.","repository":{"type":"git","url":"git+https://github.com/hilalh/cra-template-tailwind.git"},"license":"MIT","engines":{"node":">=8"},"bugs":{"url":"https://github.com/hilalh/cra-template-tailwind/issues"},"devDependencies":{},"dependencies":{},"gitHead":"365f9743913a7a353f9ef831ef4e2c9aa13b6a96","homepage":"https://github.com/hilalh/cra-template-tailwind#readme","_id":"@bamya/cra-template-tailwind@1.0.1","_nodeVersion":"13.3.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-A4z8W5hKw/qKDYiJJ+c+3d0EVeAT3n1QAmhzzBa/fU436Iwcq7cxIWMiX4LDsxy1frCk5mqifuQDfX6xsJ8c4g==","shasum":"1ef0053b4d3d5d78fccf479042027bd4ad6a7141","tarball":"https://registry.npmjs.org/@bamya/cra-template-tailwind/-/cra-template-tailwind-1.0.1.tgz","fileCount":25,"unpackedSize":1949230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerxh7CRA9TVsSAnZWagAAYU4P/2ICLLcAknCcA5u23j98\niygaWBBbpBCNfDT31gJFpRW6tiyyDz7+SdfL0O+4DfbTGftCfntsPKf1CgFP\nHJwFQWonA/d7nAL1BAwqUWPMnBWMFlr465WeKmDHl0CHmEW/ovKpajPA0lua\nXM22w7ofStFUi823RJBynC8pga+FgUatFaFuUSieQUcqqmUbyeybNU4db4P8\n99Qh9ket98aO3RtuVD4DRD1SMqkBnx855KaN2OIyOi60CiyCvNyUwTjV73YV\nqbtKKtezzsidgikqUPox0p53To5ISKpxVgQFeNVJjNd8vlpd+E8j9ss6MEGH\ntKzbXuxP27bVjY7OkjpkCFJbTbZ3U0xUUt584P82rrTvdmwneTh9TvUmN+cS\n3cNqReKEl+jGIzzghvS6FT7kKvMUC7nxmyafd1WJEQbGV0tjIuGkKAHLwJgx\n+hTvapqVc29Nz3lHeFFBsF6cIP0DKg5IFrWYwYo/ISZq/mqk+nrsdZOc4sKD\nNup3GudyrQI0n9G1kxYRmM4PmHJeWkwrGsbPxA60F0GIOMbjpqTicYM2rlp/\nwmipeuiGZsM9G0atY/A6n8NPLom5I1UPC7kApzn6GBygSkWIEJv+3IDRAnGm\niAnHXdhq51iodA/T303oNsWenJ7P566UFHla3cyDXESbJcth7XXIiGC5gAiZ\nnoRt\r\n=L+jx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/b2xY7y+8KK77dSOn6jYMhgv9gd+KIuODvwNUoSBOKwIhAICaO8pw2Lqsn/Yh4twsMkpvk63TaKaHc65svwLIwuu6"}]},"maintainers":[{"name":"hilalh","email":"dev@bamya.io"}],"_npmUser":{"name":"hilalh","email":"dev@bamya.io"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cra-template-tailwind_1.0.1_1588533371072_0.33499145457400803"},"_hasShrinkwrap":false},"1.0.2":{"name":"@bamya/cra-template-tailwind","version":"1.0.2","keywords":["react","tailwind","wesbos","eslint","create-react-app","template"],"main":"template.json","description":"The base template for Create React App with Tailwind CSS and Wesbos ESLint config.","repository":{"type":"git","url":"git+https://github.com/hilalh/cra-template-tailwind.git"},"license":"MIT","engines":{"node":">=8"},"bugs":{"url":"https://github.com/hilalh/cra-template-tailwind/issues"},"devDependencies":{},"dependencies":{},"gitHead":"acdfb0726dde16e6093558c2d5a52fc49314d783","homepage":"https://github.com/hilalh/cra-template-tailwind#readme","_id":"@bamya/cra-template-tailwind@1.0.2","_nodeVersion":"13.3.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-11VGHKvpSHw+leqtRRkOanWLIJvUtNQm8DoWRaqH8o/mpl1tpX6wXznZMFzW5DAh4fkui8DfqDcgeFBXlJoTXw==","shasum":"c2c4573f919b0c54a9145c194b9f32536ecc7e00","tarball":"https://registry.npmjs.org/@bamya/cra-template-tailwind/-/cra-template-tailwind-1.0.2.tgz","fileCount":27,"unpackedSize":1955401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesWvLCRA9TVsSAnZWagAAnLUP/R9NHb+hG9uk4b1mfrti\n8NITk783OH/We8DGf/PVlgO8skEr3513U75H2/QvTwACPPj8YXuzEfV7mY54\nH/g3g3jCi8zzCV1LhPyjH6t0OSVPuDxkqvIwnoSujMdFkqdtLzK2WV3ErTuw\nxvzOZw23d++wdkl02VszXlRCl8z5LLB/9AxE5cPik7jsI/lDpblgIKJR0Vgs\n/HVjEOlSx3vT1ZMDOKhqG2WxkpD66bCrzhSZUwp3ONsKacQsDmnrd+4hMRz4\nFCZjtpezJGmb9FG9BeI+0LgS2n/8/mCfBsg/GhQpUFLnr2jhnvoEkRj3FQzs\n2cn5gmNQTp2XP+ZDs5idlDNIV+gQCG0YtWICcYM2YiciRrnfGReZQUxpILuK\ndSeEGKK99jTAxkwUF9Lb3vIe7v09EEudzfNhvUAwtYWygM6dBpglXJZHLbhw\nDSlFlCabEUoxtLRgPtvUv4hktQ2waV2YFoPxzLCaqKjefjATRqxKRqG7Yafz\nGuVPBnBWF+43TVgpiStvZWf/7jmSrnszT9SWd7OPIPg8Kv46wsnT97f4Az0V\nxM/NHhklAYrQewVRIe2SbTc8sRdHSPdXbSVJjZYssYBYditSOrhVquMPme3S\n7+9dlrtUz0JYG7WKg9rfHDHef7iEazoZWVzMThwI9PH74yJNzDNFceFAAmKf\ndmS2\r\n=mcDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc/vsLf8IpyqYQpu5Tej4bYrGXT3aoJm4rRCwc+m5QiwIgGnHA2vnB/CMQK9Mv3tdDt/Qx5+2KfV1zeBgknu9mOZg="}]},"maintainers":[{"name":"hilalh","email":"dev@bamya.io"}],"_npmUser":{"name":"hilalh","email":"dev@bamya.io"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cra-template-tailwind_1.0.2_1588685770678_0.329912730265179"},"_hasShrinkwrap":false},"1.0.3":{"name":"@bamya/cra-template-tailwind","version":"1.0.3","keywords":["react","tailwind","wesbos","eslint","create-react-app","template"],"main":"template.json","description":"The base template for Create React App with Tailwind CSS and Wesbos ESLint config.","repository":{"type":"git","url":"git+https://github.com/hilalh/cra-template-tailwind.git"},"license":"MIT","engines":{"node":">=8"},"bugs":{"url":"https://github.com/hilalh/cra-template-tailwind/issues"},"devDependencies":{},"dependencies":{},"gitHead":"2f0063285b6e898bd85cf8a712267e90564a091d","homepage":"https://github.com/hilalh/cra-template-tailwind#readme","_id":"@bamya/cra-template-tailwind@1.0.3","_nodeVersion":"12.16.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-7n+6PlisShWLMAqosT3jpiuogdTMKUpbdoJnW7nScolSpcDG4xyIQKGDjVNMQiQH4EOtlDOokCf5O1rX0PGdzQ==","shasum":"b834f16fe48008fbb5bd1c9d671e0b07211531ab","tarball":"https://registry.npmjs.org/@bamya/cra-template-tailwind/-/cra-template-tailwind-1.0.3.tgz","fileCount":27,"unpackedSize":1949516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesv9GCRA9TVsSAnZWagAAh5oQAI2nk5vuEuAxsIpD0vdR\nuLVzG3RRB2/cZHe/3sWFCkihCtf8jaOmvkS+cusOkotmep3r7ZDdspS/u2A5\neVhtddKQUUTQE0tQr4c8iswtJP70Y18xuLdvLRHczVBhx1V2KtPwUXRsICXp\ntazbnqqUJluPs32XLlwk1ukO5j7VYx/Cl++OU4ApRZcU4kxft6T6A+5IMic6\n49cr1d5reSD3iPLLdvQFYBxT/PhVY91+0D/1lS699MJCwYu41rUJrOSPRkFh\nxmyDAZb4M131uGbUzuRV2V264tBb1coWXYI22anPp8+kxSct4vEGjBc5Htfu\nJ5zq8lxeh41lU7+e2jZK2X/LmUaM0dfj1QjqyVzCrSRrvZts2HUOgcWVJa4U\nRYJTvtfHz9DMixIuR0KSebRizOBrBwjwRdSM5h4Ut2sybg065rYWjg6fwgWD\n+hyxd469jkkMVzvBLD+UuAaM88vAAAhtnn6ZSnG+zd7iVGVbCSeYg9ucyKXb\n/Felasfj0lXZ/TLHggii7dLw3/sAbPQQYwYRisJ4O9BmGgol9IhnCNhnwIEi\nllWZpaUMQsoAmO+r0W6d+cysdx0wqb2A+p7WcPetWnhimMS2RpqrO7dJoa3i\n5sdtMGqDvFw89DNRTk4Y8MckYyebJptzCK7Ymhro/e8m1om8L9vAHGIS22HJ\nh74t\r\n=MBYe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6UELUWlyyaZHdpZu4MN8WTapGMSn88DQ4XgUEpgX1sAIgOCMPLOKksN2AqLH8cJNGHNl3iHshAC5xR2Ot04M+zyc="}]},"maintainers":[{"name":"hilalh","email":"dev@bamya.io"}],"_npmUser":{"name":"hilalh","email":"dev@bamya.io"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cra-template-tailwind_1.0.3_1588789062187_0.17752228981023177"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-03T14:10:09.313Z","1.0.0":"2020-05-03T14:10:09.740Z","modified":"2022-04-04T17:40:43.012Z","1.0.1":"2020-05-03T19:16:11.272Z","1.0.2":"2020-05-05T13:36:10.859Z","1.0.3":"2020-05-06T18:17:42.366Z"},"maintainers":[{"name":"hilalh","email":"dev@bamya.io"}],"description":"The base template for Create React App with Tailwind CSS and Wesbos ESLint config.","homepage":"https://github.com/hilalh/cra-template-tailwind#readme","keywords":["react","tailwind","wesbos","eslint","create-react-app","template"],"repository":{"type":"git","url":"git+https://github.com/hilalh/cra-template-tailwind.git"},"bugs":{"url":"https://github.com/hilalh/cra-template-tailwind/issues"},"license":"MIT","readme":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n[![CircleCI](https://circleci.com/gh/kriswep/cra-tailwindcss-in-js.svg?style=svg)](https://circleci.com/gh/kriswep/cra-tailwindcss-in-js)\n\nIt 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/).\n\n*Updated to work with Tailwind version 1!*\n\n## Why?\nTailwind is a great utility-first CSS framework. When used with React we want to be able to use as much JSX and CSS-in-JS in order to be able to modify objects' styles in the same class based on the actual state of the object / data.\n[Here's](https://devmode.fm/episodes/css-in-js-an-emotional-topic) more explanation about the topic. IF you prefer to read then check [this](https://dev.to/lpbayliss/how-and-why-i-use-emotion-with-tailwind-4elj) one out.\nTailwind has shorter predefined methods to achieve great designs that don't depend on particular design language.\nIf you want to understand more on why to use both together. read [this](https://dev.to/lpbayliss/how-and-why-i-use-emotion-with-tailwind-4elj)\nSome of the libraries that allow us to [achieve](https://nystudio107.com/blog/using-tailwind-css-with-gatsby-react-emotion-styled-components) that are emotion and styled-components.\nCan't we achieve that with PostCSS exclusively? No quite.\n### So how can we use Tailwind CSS along with CSS-in-JS in styled-components\nWe need to take a hybrid approach where PostCSS will be used to compile Tailwind base CSS styles, while using Babel macros to compile Tailwind CSS macros into Tailwind classes through our CSS-in-JS code.\nYou can find more information over [here](https://dev.to/lpbayliss/how-and-why-i-use-emotion-with-tailwind-4elj)\n### What's PostCSS for?\nWe use PostCSS to build the base style sheets from the Tailwind CSS. Essentially it allows us to normalize the CSS across all pages in our project.\n### Why should we use Babel macros\nBabel macro is compilation-time plugin i.e it allows us to modify the original source code of our program during compilation to whatever value we need.\nPerhaps, if we have defined placeholders in our code to be replace `babel-macro-plugin-*` could help us replace that.\nSpecifically, in our project we use `tailwind.macro` along with `babel-macro-plugin` to modify all `tw` in our CSS-in-JS entries to an actual Tailwind CSS code during compilation.\n### So how can I achieve this setup on my own.\nWhile inspired by many of the Gatsby posts about styled-components and Tailwind CSS, I first started with [this](https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/) guide. Which wasn't so thorough as I couldn't use CSS-in-JS yet due to the lack of Babel macros.\nRight after I started building this CRA template to make to have a ready-to-use boilerplate by following the official CRA [docs](https://create-react-app.dev/docs/custom-templates/) and this article right [here](https://medium.com/@alexgrischuk/how-to-create-custom-create-react-app-cra-templates-73a5196edeb)\nI then continued reading and bumped into the follwing guides:\n* https://dev.to/dbshanks/an-efficient-react-tailwindcss-styled-components-workflow-458m\n* https://wetainment.com/articles/tailwind-css-in-js/\n* https://www.freecodecamp.org/news/how-to-style-your-react-apps-with-less-code-using-tailwind-css-and-styled-components/\n\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.<br />\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.<br />\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.<br />\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.<br />\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.<br />\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `yarn eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf 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.\n\nInstead, 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.\n\nYou 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.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n### `yarn build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\n","readmeFilename":"README.md"}