Skip to main content

Setup Styling

We need to add tailwind css support for creating the UI elements & styling.

Follow these steps:

  1. Run the following commands:

     yarn add -D tailwindcss postcss postcss-cli autoprefixer
     yarn tailwindcss init tailwind.js --full
  2. Create a new file called postcss.config.js in the root directory.

    const tailwindcss = require('tailwindcss');
    module.exports = {
    plugins: [
    tailwindcss('./tailwind.js'),
    require('autoprefixer')
    ],
    };
  3. Edit the tailwind.js file by adding a new property called extend:

      module.exports = {
    content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    ],
    presets: [],
    darkMode: 'media', // or 'class'
    theme: {
    extend: {
    colors: {
    pinkish: "rgb(224, 36, 94)",
    primary: "rgb(29, 161, 242)",
    "primary-hover": "rgb(26, 145, 218)",
    dark: "rgb(21, 32, 43)",
    "dark-lighter": "rgb(25, 39, 52)",
    "dark-hover": "rgb(22, 45, 64)",
    },
    opacity: {
    0: 0,
    15: "0.15",
    25: "0.25",
    50: "0.50",
    75: "0.75",
    100: "100",
    },
    borderRadius: {
    none: "0",
    sm: "0.125rem",
    default: "0.25rem",
    md: "0.375rem",
    lg: "0.5rem",
    full: "9999px",
    xl: "1rem",
    },
    },
    // ... keep the other fields as it is
    };
  4. Create a new file named index.css inside the src directory, and paste the following code:

      @tailwind base;
    @tailwind components;
    @tailwind utilities;

    body {
    background-color: rgb(21, 32, 43);
    }
  5. Update the following scripts in package.json:

      "scripts": {
    "start": "yarn watch:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/index.css -o src/assets/main.css",
    "watch:css": "postcss src/index.css -o src/assets/main.css"
    }
  6. Add the import statement inside the index.ts file like this:

      import './assets/main.css';
  7. Download the svgs, and save the directory inside src folder.