How do I use Tailwind CSS on a project?

Installing Tailwind CSS

Open your terminal or command prompt and navigate to your Blutui project directory. Begin by installing TailwindCSS using:

npm install -D tailwindcss postcss

Initialise the configuration for TailwindCSS with:

npx tailwindcss init

This command will create a tailwind.config.js file in your project root.

Configure Tailwind CSS

Add the following configuration to tailwind.config.js under the content key to instruct TailwindCSS where to look for classes:

content: [
  "./views/**/*.{canvas,html}",
],

Setting up the source directory

Create a src folder at the root of your project, so you have src, public, and views folders. This structure allows TailwindCSS to only compile the classes you're using. Inside the src folder, create a styles sub-folder and then add a main.css file within it. Add the following directives in the main.css file:

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

Compiling Tailwind CSS

Execute the following command:

npx tailwindcss -i ./src/styles/main.css -o ./public/main.css --watch

This command compiles the CSS and outputs it to the public folder, making it ready to link in your template.

Integrating Tailwind CSS with Parcel.js

If you're using Parcel in your Blutui project and need to set it up, refer to the guide on setting up Parcel with Blutui.

Next, create a .postcssrc file at the root of your project (next to the tailwind.config.js file) and add the following configuration:

{
  plugins: {
    tailwindcss: {}
  }
}

Now, direct Parcel to compile the CSS file. With the above configuration, Parcel should successfully compile your TailwindCSS styles.