TailwindCSS Support?

Feature Request
#1

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

#2

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
1 Like
#3

I will try this. Thanks so much.

#4

What about something like Tachyons?

#5

Tachyons is even easier than Tailwind CSS to begin using. It is just straight CSS without any processing needed. Just start an HTML project and link the Tachyons style sheet to you page/project.

1 Like
#6

Well, looking into Tailwind…has led into looking into Tachyons,

…which has led to this

which I have to admit…actually made me belly laugh.
which has been pretty rare as of late.
So , If I may… please have a look :slight_smile:

and now…tachyons… lets have a look… some utility thing.
without having to download and install 8.1GB of xcode… Homebrew…just to get Node running on someone elses mac they are letting me use,
just to see some pretty colours and layouts…

Sweet jesus

#7

We recently launched a fully featured Tailwind Visual Editor add-on for Pinegrow Web Editor:
https://pinegrow.com/tailwind-visual-editor

1 Like
#8

Is there a way to try the Tailwind addon with an already licensed copy of Pinegrow?
Following these instructions:

It suggests this:

If you already have Pinegrow Web Editor, but don’t have the Tailwind Visual Editor add-on you can start a trial in Support -> Purchase & Activate under Add-ons Tailwind Visual Editor.

However, this starts a full trial. Since I already have a licensed copy of Pinegrow, can I trial the Tailwind Addon with it?

Thanks.

#9

@mcheck going into the full trial is the only way to try it, at the moment. Once you’re done just click on the Activate in Purchase & Activate to switch back to the licensed version.