Example setup for React + TailwindCSS + UI Devtools


Note: To use this example, you will need access to ui-devtools/tailwind
which is available only to my sponsors on GitHub

   

You can clone this repository or follow the steps ahead:

 

01

 

Use create-react-app to initialise a new React project:

 

npx create-react-app react-example

cd react-example

 

Add UI Devtools for tailwind

 

yarn add --dev ui-devtools/tailwind

This package is available only to my sponsors on GitHub. Enjoy, and thanks for the support!

 

 

02

 

Add TailwindCSS following the official documentation

 

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

yarn add --dev @craco/craco

npx tailwindcss init -p

 

Next, create a craco.config.js at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins along with the UI Devtools babel plugin:

 

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')]
    }
  },
  babel: {
    plugins: ['@ui-devtools/tailwind/babel']
  }
};

 

Modify scripts in package.json to use craco

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

 

Include Tailwind in ./src/index.css

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

03

 

Wrap your application root with <Devtools> in src/index.js. This will render the visual editor inside your application for dev environment:

 

import React from 'react';
import ReactDOM from 'react-dom';
import { Devtools } from '@ui-devtools/tailwind';
import './index.css';
import App from './App';

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

 

 

04

 

Start devtools server

 

npx devtools-server -c tailwind.config.js

 

Something's not working?

No worries, I'm here to help. Feel free to create an issue or reach out to me on twitter/email.