Style Remix app with Tailwind CSS

There are different ways to style your Remix applications. The common way is using Tailwind CSS. Change directory to the remix-app created in previous tutorial. Then run the command below to add Tailwind dependency to the remix-app:

npm install -D npm-run-all tailwindcss

Then initialize Taiwind framework with the command:

npx tailwindcss init

The init command generates tailwind.config.js file. In the config file, you have to tell tailwind the file types that will be applied styles. In this example app, we apply styles to TypeScript and JavaScript files (ts, tsx, js, and jsx files). We are going to use Navbar component from daisyui - Tailwind CSS components. Thus, add daisyui library to the the plugins.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

Execute npm install daisyui command to install daisy in the remix-app.

 

Update the package.json file to generate the Tailwind css file during dev and for the production build.

//...

"scripts": {

    "build": "run-s \"build:*\"",

    "build:css": "npm run generate:css -- --minify",

    "build:remix": "remix build",

    "dev": "run-p \"dev:*\"",

    "dev:css": "npm run generate:css -- --watch",

    "dev:remix": "remix dev",

    "generate:css": "npx tailwindcss -o ./app/tailwind.css",

    "start": "remix-serve build"

  },

//...

Finally, import the tailwind.css file into the app by updating the root.jsx file to link to the tailwind.css file:

app/root.jsx

import styles from "./tailwind.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }]
}

In the app directory, create components folder. To add daisyui NavBar to the remix-app, create NavBar.jsx file in the the components folder. The NavBar component uses svg icons from heroicons.

const NavBar = (props) => {

    const {user} = props;

    return (
      <div className="navbar bg-base-100">
      <div className="navbar-start">
      <div className="dropdown">
      <label tabIndex={0} className="btn btn-ghost btn-circle">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
      </label>
      <ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
        <li><a href="/">Home
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
        </a>
        </li>
        <li><a >User Management
        <svg className="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg>
         

        </a>

        <ul className="p-2">
            <li><a href="/user">User List</a></li>
            <li><a>User Roles</a></li>
          </ul>
        </li>
        <li><a>About
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </a></li>
      </ul>
    </div>
  </div>
  <div className="navbar-center">
    <a className="btn btn-ghost normal-case text-xl"></a>
  </div>
  <div className="navbar-end">
    
    <button className="btn btn-ghost btn-circle">
      {

      !user?
      <div className="tooltip" data-tip="login">
        
        <a href="/user/login">
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
        </a>
      </div>:

      <div className="tooltip" data-tip="logout">
        
      <a href="/user/logout">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
      </a>
    </div>

    }
    </button>
    
  </div>
</div>
    )
  }
  
  export default NavBar

Modify the routes/index.js file to display "Welcome!" message on the home page.

export const meta = () => {

  const title = 'Home';

  const description = 'Here is my Awesome Home page!';

  return {

    charset: 'utf-8',

    title,

    description,

    keywords: 'Remix, Mysql, Demo',

   

  };

};

export default function Index() {

  return (

    <div className="grid place-items-center">

     

        Welcome!

    </div>

  )

}

Finally execute npm run dev to launch the remix app in development mode on port 3000.