Tailwind theme

Formio.js allows you to install different themes. This package provides a theme based on TailwindCSS v3.

Install

npm install @tsed/tailwind-formio --save
npm install tailwindcss postcss autoprefixer postcss-normalize --save-dev

Configure postcss

Edit postcss.config.js and add the postcss plugins list:

export default {
  plugins: {
    "postcss-normalize": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {}
  }
};

Configure tailwind

Edit your tailwind.config.js and copy the following content:

import { tailwindPreset } from "@tsed/tailwind-formio/tailwind.preset";

const primary = "hsla(208, 100%, 43%, 1)";
const secondary = "hsla(190, 81%, 42%, 1)";

module.exports = {
  content: [
    "./node_modules/**/*.{js,jsx,ts,tsx,ejs}"
    // add your paths
  ],
  presets: [tailwindPreset],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: primary,
          50: "hsla(208, 100%, 91%, 1)",
          100: "hsla(208, 100%, 83%, 1)",
          200: "hsla(208, 100%, 75%, 1)",
          300: "hsla(208, 100%, 67%, 1)",
          400: "hsla(208, 100%, 59%, 1)",
          500: "hsla(208, 100%, 51%, 1)",
          600: primary,
          700: "hsla(208, 100%, 35%, 1)",
          800: "hsla(208, 100%, 27%, 1)",
          900: "hsla(208, 100%, 19%, 1)"
        },
        secondary: {
          DEFAULT: secondary,
          50: "hsla(190, 81%, 90%, 1)",
          100: "hsla(190, 81%, 82%, 1)",
          200: "hsla(190, 81%, 74%, 1)",
          300: "hsla(190, 81%, 66%, 1)",
          400: "hsla(190, 81%, 58%, 1)",
          500: "hsla(190, 81%, 50%, 1)",
          600: secondary,
          700: "hsla(190, 81%, 34%, 1)",
          800: "hsla(190, 81%, 28%, 1)",
          900: "hsla(190, 81%, 20%, 1)"
        },
        "gray-darker": "#504747"
      }
    }
  }
};

Then create a tailwind.css in styles directory and add the following lines:

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

Import the tailwind.css in the index.css created by create-react-app:

@import "formiojs/dist/formio.full.css";
@import "./tailwind.css";
@import "@tsed/tailwind-formio/styles/index.css";

Optionally, you can import fonts and icons:

@import "formiojs/dist/formio.full.css";
@import "./tailwind.css";
+@import "./fonts/source-sans-pro/index.css";
+@import "./fonts/inconsolata/index.css";
+@import "./fonts/bxicons/index.css";
@import "@tsed/tailwind-formio/styles/index.css";

Now, we can configure formio to use the tailwind template in our React application. So edit the index.js (or index.ts):

import React from 'react';
import ReactDOM from 'react-dom';
import { Formio, Templates } from "@tsed/react-formio";
import tailwind from "@tsed/tailwind-formio";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

Formio.use(tailwind);
Templates.framework = "tailwind";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Finally, start the application!