Pinegrow Community Support Forum

TailwindCSS Support?

Any chance for TailwindCSS support in the future? Can we use it already?

Tailwind can already be used. There are a few extra steps compared to what you might be used to if using another css preprocessor, like SASS. I am assuming you are somewhat savvy with development tools - let me know if you need additional instructions.

  1. Make a new project in Pinegrow - to simplify, use a basic HTML project.
  2. Navigate to the root of the project directory and install tailwind (I like yarn, so: yarn add tailwindcss --dev) This will install a bunch of node modules
  3. Next, initialize your project with either : npx tailwind init or ./node_modules/bin/tailwind init if you don’t have npx installed. This will create a “tailwind.config.js” file - this is important for customizing tailwind.
  4. Next open your style.css file located inside the css folder and add in the following:
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    You might not need all of these.
  5. run either: npx tailwind build ./css/style.css -o main.css or `./node_modules/bin/build ./css/style.css -o main.css’. This will create the processed CSS file for use in the project.
  6. From within Pinegrow, add both of the stylesheets to your project/pages. Make changes only to the style.css page.
    Unless you set-up sometype of script and npm watch you will have to re-run the build every so often. This is especially true if you aren’t using the included pre-built classes. So for example, if you add:
    .custom-div { @apply .border .py-2 .px-3; }
    You will have to recompile before these show up. Please note - TailwindCSS does not have an autoprefixer, so you will have to roll your own using postCSS/GULP/whatever
    Namaste!!
    Bob

I will try this. Thanks so much.