⚛ Configuring Preact with Tailwind CSS

In this article, I will work through how to add tailwind CSS to your preact application.

For development Mode

First, install a brand new Preact project with preact-cli

npx preact-cli create typescript my-app

Here I am creating a new preact project using typescript template, the name of my application is my-app.

when all the dependencies are done installing cd into the project.

cd my-app

In the styles folder create a new file named tailwind.css and put this css in the file

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

Then create a tailwind.config.js file by typing this command.

npx tailwindcss init

it will generate a new tailwind.config.js file in the root of your project.

Next up edit the tailwind.config.js file with your own configuration

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Here I am using the new JIT mode that will only generate the css as you write a new class in your files.

Now you can watch the changes by writing the following command

npx tailwindcss -i src/style/tailwind.css -c tailwind.config.js -o src/style/index.css --watch

This will generate the index.css file.

You can run the preact server in a separate terminal

yarn dev
# or
npm run dev

For Production Mode

For production mode, you can run the following commands to produce optimized css

NODE_ENV=production npx tailwindcss -i src/style/tailwind.css -c tailwind.config.js -o 
src/style/index.css

You can also minify the css by

NODE_ENV=production npx tailwindcss -i src/style/tailwind.css -c tailwind.config.js -o 
src/style/index.css --minify

This command uses cssnano to minify the css.

Conclusion

Last but not least, you can save the tailwind commands in your package.json

"scripts": {
    "tw:watch": "npx tailwindcss -i src/style/tailwind.css -c tailwind.config.js -o src/style/index.css --watch",
    "tw:build": "NODE_ENV=production npx tailwindcss -i src/style/tailwind.css -c tailwind.config.js -o src/style/index.css --minify"
}

Thank you for your patience to read the article. If you have any insides please comment below.