Tailwind React Configuration

README.md

React Tailwind Configuration

These steps work through initializing and setting up fonts and custom colors in tailwind.

Initialization

• Add the Tailwind CSS Intellisense plugin to vscode
• Follow these instructions for basic initialization and setup
  • NOTE: Add the full flag to this command like so: npx tailwindcss init -p --full
    • this will add all of the utility classes which is good for standardization
    • you will need to edit the colors and fonts still

Note on Files

• in the content array, you can use wild card selectors to make tailwind scan all the files in particular directories ie: content: ['./src/**/*.{js,jsx,ts,tsx}']

Plugins

• If you're using prettier, install the tailwind-prettier-plugin
• Consider using the Tailwind Typography Plugin

---

Locally Hosted Fonts

Adding the Font Files

• Add your font files to a fonts directory in static
• It should look like this (with a lot more files):

src/
static/
  fonts/
    font-one-name/
      - file.ttf
    font-two-name/
      - file.ttf

Importing the Fonts

• Font imports can get a bit long, so we'll move them into their own files in assets/
• Create the following files and directories:

src/assets/css/fonts/
  font-one-name.css
  font-two-name.css

• Then add your import statements for each font (this is the tedious part)
• This example uses Montserrat, change the name accordingly, you'll make an @font-face {} for each font file

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat/Montserrat-Thin.ttf");
  font-weight: 100;
  font-style: regular;
}

Importing fonts into your Main CSS File

• After setting up the font files, import your custom font css files into the main css file
• in src/assets/css/main.css (you should already have the @tailwind imports in this file)

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

@import 'fonts/montserrat.css';

Add your Fonts to the Tailwind Configuration

• You can set names for your fonts, these will end up being used like font-display or font-sans in your react files.
• example:

  fontFamily: {
      display: ['Montserrat', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      text: ['"Source Sans Pro"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      mono: ['"Source Code Pro"', 'ui-monospace', 'monospace'],
    },

• you can delete a lot of the extra system font stuff if you want, reducing can give you a bit better control of the fallback fonts

---

Setting up Brand Colors

• The default tailwind configuration has a large set of colors, however you might want to reduce your palette to only use brand colors, or to have a special prefix for brand colors
• You'll configure this in the tailwind.config.js file

theme: {
  colors: {
    transparent: 'transparent',
    current: 'currentColor',
    hm: {
      purple': {
      50: #333333,
      100: #444444,
      300: #666666,
      500: #888888,
      700: #999999,
      900: #000000
     }
    }
  }
}

• Naming Conventions are up to you, I recommend to include light to dark variations and to follow the numbered naming convention used by tailwind. If you want a reduce palette, use even or odd numbers as done in the example above
• To include the default tailwind colors, just leave the auto-generated code there and add your prefixed colors along with them

---

Background Images

• you can add your own background images to tailwind and it will process them, this is great if you have any hero or splash images, textures, or custom gradients
• example in tailwind.config.js:

  extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'water-texture': "url('/images/raw/water-background-1370w-605h.png')",
      },
  }

• more details here