react-sublime

REACT-SUBLIME

installation

Create react app

npx create-react-app test

Navigate to react app

cd test

Install react sublime, sublime components and styles, also sass and tailwind

npm i react-sublime sublime-components sublime-styles tailwindcss sass sass-loader

Initialize react-sublime

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

Building

npx react-sublime build

builds output

npx react-sublime dev

watches and builds

integrating tailwind css !important

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 ...

};

importing stylesheet

after building the following stylesheet will be available, import it in your css or jsx.

import "{your input directory}/sublime.scss"

components

react sublime comes with many useful startup components

see the "sublime-components" repository

styles

react sublime comes with many useful startup components, these startup components have configurable styles

see the "sublime-styles" repository