npx create-react-app test
cd test
npm i react-sublime sublime-components sublime-styles tailwindcss sass sass-loader
npx react-sublime init
it will ask you where you want to have your styles
you can enter src/styles for example, and your style config will be there
this will make a folder with the following schema
- components
- component.scss
- fonts
- font-name
- font-type.otf
- colors.json
- fonts.json
- screens.json
- sizes.json
npx react-sublime build
builds output
npx react-sublime dev
watches and builds
init tailwind, then in config import colors.json and so on
import colors from "./src/styles/colors.json";
import screens from "./src/styles/screens.json";
import sizes from "./src/styles/sizes.json";
import fonts from "./src/styles/fonts.json";
export default {
//other config ...
theme: {
extend: {
colors,
screens,
sizes,
fontFamily: fonts,
},
},
//other config ...
};
after building the following stylesheet will be available, import it in your css or jsx.
import "{your input directory}/sublime.scss"
see the "sublime-components" repository
react sublime comes with many useful startup components, these startup components have configurable styles
see the "sublime-styles" repository