Quickstart with Tailwind + TypeScript + VSCode

Resources

Installation

npx create-react-app hello-tailwind --template typescript
cd hello-tailwind
# Using Yarn
yarn add tailwindcss
copy

Add CSS imports

At the top of src/index.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
copy

Adding scripts

{
  "scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind"
  }
}
copy

Usage with classnames

yarn add classnames @types/classnames
copy

Updating App.tsx to use the correct styles

Update index.tsx with the following:

import React from 'react';
import ReactDOM from 'react-dom';
import './tailwind.output.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
copy

Update App.jsx to be the following:

import React from 'react';
import cx from 'classnames';

function App() {
  const [toggle, setToggle] = React.useState<boolean>(false);

  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className={cx('p-3 rounded-sm', {
          'bg-blue-500 hover:bg-blue-700': !toggle,
          'bg-red-500 hover:bg-red-500': toggle,
        })}
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  );
}

export default App;
copy

Alternatively, you could abstract this out:

import React from 'react';
import cx from 'classnames';

function App() {
  const [toggle, setToggle] = React.useState<boolean>(false);

  const buttonClasses = cx({
    'bg-blue-500 hover:bg-blue-700': !toggle,
    'bg-red-500 hover:bg-red-500': toggle,
  });
  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className={`p-3 rounded-sm ${buttonClasses}`}
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  );
}

export default App;
copy

Alternative without classnames

import React from 'react';
// import cx from 'classnames';

function App() {
  const [toggle, setToggle] = React.useState<boolean>(false);
  console.log('toggle', toggle);

  const buttonClasses = toggle
    ? 'bg-red-500 hover:bg-red-500'
    : 'bg-blue-500 hover:bg-blue-500';
  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className={`p-3 rounded-sm ${buttonClasses}`}
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  );
}

export default App;
copy