Why Nix?

In my project, it is a go web app, so all the dependencies in the project are managed as go modules by my go.mod file. Then everything else the developer needs is set up as a dev shell. Things like the standalone tailwind CLI, I am using a nix flake which already has DaisyUI built in so it can also generate those types i.e. btn in the final styles.css (or whatever you called it). The flake is here: https://github.com/aabccd021/tailwindcss-daisyui-nix

I didn’t want to have multiple package managers, using npm or something else.

You can learn more about this here: https://www.youtube.com/watch?v=bdGfn_ihHOk

Setup

Assuming we have enabled the tailwind LSP in our Neovim config, I am using NixCats, and it looks it like this (using nvim-lspconfig):

{
    "tailwindcss",
    lsp = {},
},

You can find my full config here:

• https://gitlab.com/hmajid2301/nixicle/-/blob/8c959ca5bd6436595592d0cedf932787ba86e359/modules/home/cli/editors/neovim/lua/myLuaConf/LSPs/init.lua#L199
• https://gitlab.com/hmajid2301/nixicle/-/blob/MAJ-311/modules/home/cli/editors/neovim/default.nix#L48

So first I added this flake as an input

tailwindcss_daisy.url = "github:aabccd021/tailwindcss-daisyui-nix/lsp";
tailwindcss_daisy.inputs.nixpkgs.follows = "nixpkgs";

Then install the following packages:

tailwindcss-language-server
tailwindcss_daisy.packages.${system}.default

The tailwindcss-language-server being the LSP server for tailwind. Normally, this is installed in my dot files repo. (I linked above). But this one is an overlay from the flake. So this one also has DaisyUI in its NODE_PATH. Then it also auto-complete classes from DaisyUI.

Read this issue: https://github.com/aabccd021/tailwindcss-daisyui-nix/issues/1

Finally, to get the tailwind LSP to work, we need to create an empty tailwind.config.js. Else, the tailwind LSP does not seem to start correctly. Even though the project is configured using the CSS file (probably will be fixed)

That’s it! It took me a while to figure it out, but this seems to work pretty nicely.

Setup

First, follow the installation guide found here. This will show you how you can add TailwindCSS to your current project. For part 2 I will assume you called your CSS file global.css. This is the file that contains @tailwind base; etc.

Global CSS

First, we need to edit our TailwindCSS file so it looks something like this:

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

.root,
#root,
#docs-root {
  --primary: #367ee9;
  --secondary: #a0aec0;
  --accent: #718096;
  --background: #fff;
  --main: #0d0106;
  --header: #2d3748;
}

I wrap my entire body in an element with class root or id root, so that any of my elements can access it later.

Gatsby

If you’re using Gatsby, you can add the following to your gatsby-browser.js file:

export const wrapRootElement = ({ element }) => (
  <div className="root overflow-hidden">{element}</div>
);

This will wrap all of our pages in the class root and overflow-hidden CSS class from TailwindCSS.

tailwind.config.js

Now we’ve defined some CSS variables how can we use them with Tailwindcss? Simple, we update our tailwind config file with some of the new CSS variables. Here we simply want to extend the config to add new colour values.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        main: "var(--main)",
        background: "var(--background)",
        header: "var(--header)",
        accent: "var(--accent)",
      },
    },
  },
};

The syntax is very similar to how we would use the variables normally with CSS where it would normally look like:

element {
  background-color: var(--primary);
}

Logo

Now how do we use our variable? Again pretty straight forward just like our normal tailwind classes. Let’s imagine we have a React component called Logo.tsx, defined like so:

import React from "react";
import tw from "twin.macro";

export interface Props {
  /** The size of the main text  */
  size?: string;
}

const Logo = ({ size = "2xl" }: Props) => (
  <LogoContainer className={` md:text-${size}`}>
    <Tag>&lt;</Tag>
    Haseeb
    <Tag>/&gt;</Tag>
  </LogoContainer>
);

const LogoContainer = tw.div`cursor-pointer font-header tracking-wide text-2xl font-bold hover:text-primary`;

const Tag = tw.span`text-accent`;

export default Logo;

INFO: I’m using the twin.macro the library so we can use it with CSS-in-JS.

To use our variables we just use them like: text-primary. Which will use the value we defined above, #367ee9. Now if we change the value in the global.css file, it will automatically change here as well.

Dark/Light Mode (Optional)

This can be easily extended to add a dark/light mode. Add the following to the global.css file like so:

.theme-light {
  --background: #fff;
  --main: #0d0106;
  --header: #2d3748;
}

.theme-dark {
  --background: #0e141b;
  --main: #ffffff;
  --header: #eaeaea;
}

We can use a theme context to get the current theme I’ve written about here. We get the current theme then use that to determine which class to set. This will then change value of the variables. If the theme changes, the variable values will change dark -> light or light -> dark etc.

const { theme } = useContext(ThemeContext);
// ...
return (
  <div
    className={`${
      theme === "light" ? "theme-light" : "theme-dark"
    } bg-background`}
  >
    // ...
  </div>
);

That’s it! We’ve learnt how to use CSS variables with TailwindCSS.

Appendix

• Example Project
• Icons from FlatIcon