This project was bootstrapped with Create React App and we have added:
The configuration is inspired from the article Using Tailwind CSS with Create React App from David CEDDIA @davidcedia
Created with β€οΈ by Elitizon
It's available at https://github.com/elitizon/reactapp-tailwind-storybook
To use this template:
- clone it
- remove the .git folder
- git init .
- git add .
- git commit -m "First commit"
In the project directory, you can run:
To install all the packages.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The tailwindcss stylesheet is compiled each time thanks to Chodikar a great file watcher.
The page will reload if you make edits.
You will also see any lint errors in the console.
Runs storybook.
Open http://localhost:6006 to view it in the browser.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
π Result of execution
yarn run v1.22.10
$ run-s build:tailwind
$ tailwind build src/assets/tailwind.css -o src/tailwind.output.css
tailwindcss 2.0.2
π Building: src/assets/tailwind.css
β
Finished in 2.79 s
π¦ Size: 3.75MB
πΎ Saved to src/tailwind.output.css
$ react-scripts build
yarn run v1.22.10
$ cross-env NODE_ENV=production run-s build:tailwind
$ tailwind build src/assets/tailwind.css -o src/tailwind.output.css
tailwindcss 2.0.2
π Building: src/assets/tailwind.css
β
purgeEnabled=true
β
Finished in 3.39 s
π¦ Size: 12.74KB
πΎ Saved to src/tailwind.output.css
$ react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.21 KB build/static/js/2.8c9d9a05.chunk.js
3.3 KB build/static/js/main.38b50c06.chunk.js
1.9 KB build/static/css/main.c3cc090f.chunk.css
1.39 KB build/static/js/3.a38c5297.chunk.js
1.17 KB build/static/js/runtime-main.eb6c633b.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
Done in 15.44s.
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you canβt go back!
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.
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.
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
To learn how to develop UIs with component and design systems with Storybook, check out the Learn Storybook documentation