✍ tailwindcss editor play with the development running front-end project
Explore Release »
discussions · feature voting · documents
hero.mp4
Traditional tailwindcss editors (e.g. windicss.org/play) edits an html component that is separate from the front-end project. After each edit, you need to manually synchronize the html component to your front-end project. The modular nesting of a front-end project may be very complicated and uncertain. Until I saw ui-devtools (thanks for the inspiration it gave). It play with the front-end project rather than html components. Unfortunately, its working model limits UI design to the hands of front-end engineers (can't avoid some professional command line knowledge). So I thought that if I could integrate the node/git environment in an electron application, people not familiar with any code knowledge could also edit the UI of real front-end projects with the help of tailwindcss and get into the CI/CD pipeline! It seems that this goal is a bit whimsical, I hope we can approach it.
Integrating node/git is costly, adding about 30M+ to the installer size and 110M+ to the application size. It is also not necessary for front-end engineers. So we built the editor version without node/git integration and recommend it to all front-end engineers who want to try to edit tailwindcss styles easily.
yarn apply // apply editor code
// or
yarn apply:studio // apply studio code
yarn
yarn postinstall_dll
cp .env.example .env
yarn start
// or start studio
yarn start:studio
// or: Execute backend.ts without compiling. backend process does not have hotload, devtools:
yarn cross-env BACKEND_SUBPROCESS=true yarn start
yarn yarn build
// enable webpack-bundle-analyzer
yarn cross-env OPEN_ANALYZER=true yarn build
// no packaging after build, quickly execute and debug [backend,preload,renderer].prod.js:
yarn cross-env DEBUG_PROD=true yarn build
yarn cross-env NODE_ENV=production DEBUG_PROD=true yarn start
// packaging https://electron-react-boilerplate.js.org/docs/packaging
yarn package --all
yarn cross-env DEBUG_PROD=true yarn package
// or build unpacked dir
yarn cross-env DEBUG_PROD=true yarn dir