Using Tailwind CSS with Codux

Tailwind CSS is an open-source, utility-first framework that provides predefined components for styling your app. In this article, we'll guide you through integrating Tailwind CSS with your Codux projects so you can see your Tailwind classes reflected in your boards.
Important!
Ensure that your project type, Tailwind configuration format, and the content of your Tailwind configuration file are all in sync. If your project is an ESM type (indicated by a "type": "module" key in your package.json), your Tailwind configuration file should use ESM syntax, which involves using "import". On the other hand, if your package.json lacks a "type": "module" key, your Tailwind configuration file should use CommonJS syntax, which involves using "require".
Note:
If you're not using the default path for the Tailwind configuration file, make sure to specify its path in codux.config.json through the tailwindcssConfig key. See step 4 below for more information.
To get Tailwind CSS and Codux to play nice, follow these steps:
  1. Create the Tailwind Preflight (if you haven't already).
  2. Import the directives into boards.
  3. Add the global setup to codux.config.json (if it isn't already there).
  4. Configure the Tailwind Config path (if it isn't in the project root).
Each of these steps is described below. You can also see us run through this configuration by watching our video here:

1. Create the Tailwind Preflight (if you haven't already) 

Maybe you've opened a Tailwind CSS project in Codux and noticed that your styles aren't showing in boards, or maybe you're just starting out on a new project. Either way, the first thing you need to do is to add the essential Tailwind utilities (a set of base styles for Tailwind projects called Preflight) to boards in your project, to give you the basic style and classes you need for styling components and other elements using Tailwind.
Create a file named tailwind.css in your project's source folder, and apply the Tailwind directives there.
1
2
3
4
/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Refer to the Tailwind docs for more information. If you already have a file with the Tailwind directives, you're ready to move on to the next step.
Important!
Make note of the file where your directives are installed. You'll need the path in the next step.

2. Import the directives into boards 

Now you'll make the Tailwind CSS Styles available in your boards by creating a new (or modifying an existing) global setup file for boards, and noting its path. In this file, you'll import the Tailwind CSS file created above.
To make the three directives from the Tailwind Preflight accessible to boards, include the import of your Tailwind Preflight file like this (replacing the import path with the one relevant for your Preflight file):
1
// boards-global-setup.ts
import './tailwind.css';

3. Add the global setup to codux.config.json (if it isn't already there)  

Open codux.config.json and check if there's already a boardGlobalSetup key in use. If there isn't one, create it and point to the boards-global-setup.ts file created or modified above. The entry should look like this:
1
2
3
{  
  "boardGlobalSetup": "./src/boards-global-setup.ts"
}
If you already have this entry and it's pointing to the file with your import, there's no action needed here.

4. Configure the Tailwind Config path (if it isn't in the project root) 

A tailwind.config.js file (or tailwind.config.cjs in the case of CommonJS projects - see the important note at the top of this article) is necessary for customizing your Tailwind project (modifying theme colors, fonts, breakpoints, spacing, etc.) If you don't have this file already, refer to this link for details on creating it.
If the file is in the project's root, Codux will detect it automatically. If it is not in the project root and you're intentionally using a custom path for this file instead of the default name and/or location, use the tailwindcssConfig key in codux.config.json to point to it.
Now reopen the project, are you're all set!
Tip!
Stay tuned to our release notes for additional Tailwind support, including IDE tools and managing Tailwind classes visually in Codux!
IN THIS ARTICLE
Previous article