How do I use Tailwind CSS on a project?

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.

Add the following configuration to instruct TailwindCSS where to look for classes:

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

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;

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.

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.