Some Beginner Question

[ColeDrain]

Good day fellas.
I am fairly new to tailwind
This has troubled me so far, please can you be kind to help answer:

1. Must I use tailwind.CSS with postCSS(I don't even understand what postCSS is). In the docs I saw something about postCSS plugin.

My use case: I just want to use tailwindCSS in my project like bootstrap(that's all).

[ColeDrain]

2. What's postCSS actually about??

[anthonyhexium]

Hi,

Here is a pretty soft introduction to PostCSS.
You should start by watching the screencasts available on the tailwind website.
Have a nice day.

[ColeDrain]

Thanks for your reply.
Yeah ikr, I just wanna use it in a project that will be deployed soon, so I just want to know if the postCss is necessary.

[ColeDrain]

And the link you posted really helped. I have an idea now.

[estevanmaito]

To just get started, you don't even need to touch PostCSS. It's just 2 steps:

1. Create a CSS file (let's say style.css) with:

@tailwind base;

@tailwind components;

@tailwind utilities;

2. Compile that file so you can use it the browser

npx tailwindcss build styles.css -o output.css

This will create an output.css file that you can use in your HTML.

That's all you need to start. You can read more here https://tailwindcss.com/docs/installation/#using-tailwind-cli

---

When you finish your layout, or find that you need to extend some utilities, change fonts, etc, you can create a config file

npx tailwindcss init

This will create tailwind.config.js with this content:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Say now you want to remove unused styles, because right now your file is almost 3MB large. That's when you can add the purge option. All it does is look for the classes that are actually used and remove the unused ones. To configure it, you must tell it where are the files that you are using those classes:

module.exports = {
  purge: [ './src/**/*.html' ],
  theme: {},
  variants: {},
  plugins: [],
}

In this case, all my classes are written inside the src directory, in html files.

You can read more here: https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

In the end, in your simple case, you would finish by adding minification. That's when PostCSS gets in and you would probably be well served with these:

https://tailwindcss.com/course/setting-up-tailwind-and-postcss

https://tailwindcss.com/docs/using-with-preprocessors/#using-postcss-as-your-preprocessor

[ColeDrain]

Thanks for your reply.
I have it already in my project, I have done most of those things you listed. So postCSS is just for minification right?

[estevanmaito]

Minification, autoprefixer. Anything that you would need for a production CSS.

It just adds too much just to get started with as little effort as possible.

[ColeDrain]

Alright. Thank you very much.
I am okay now.

[Babelfisch]

Is there no way to minify the css output? There sould be a cli option --minify but it has no effect.

PS: I don't need to purge the css, only minify.

[estevanmaito]

As it is unrelated to this question and more people could benefit when searching for it, it would be better if you created another post with your question 👍