Use local build / tailwind and postcss config file instead of CDN

[connecteev]

After I run serve from within the output directory, everything magically works!

As a suggestion, I don't see a tailwind config file anywhere...and it definitely seems like that is the recommended option: https://tailwindui.com/documentation#add-the-tailwindcss-ui-plugin https://tailwindui.com/documentation#update-your-purgecss-configuration

Would it be possible to get this working with a local tailwind config file and PurgeCSS configuration, so we eliminate the CDN? https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css

Once again, many thanks for the repo!

[kiliman]

Yes, the index page was kind of a last minute addition based on a comment in the discord chat. I simply wanted to be able to view the components locally, especially as a quick way to verify that the crawler and transformer worked properly.

The local config will need to be supported in order to fully support tailwind prefixes #15 anyway.

Now that most of the transformers have been built, I can start cleaning up some of the code and make it even more flexible.

I think Adam is going to open up a private repo now that GitHub is free for teams. So the download part won't be necessary but the transformers will definitely help.

[connecteev]

Agreed. Look forward to the push for local builds / configs with tailwindcss and postcss/purgecss (and tailwind prefix support!)

Btw even if the private git repo becomes available, I think the work you've done here is of a lot of value to track changes to the tailwindui components and save time getting the components locally.

[kiliman]

Can you post an example config so I can make sure it supports it? Right now, if you add the addTailwindCss transformer, it will add a link to the stylesheet on the CDN. For custom/prefixed CSS, we'll need to add an option to specify the URL relative to OUTPUT. Anything else you can think of?

I'm relatively new to Tailwind, so still learning how to do all the configuration stuff.

[connecteev]

@kiliman Yes! I am using the addTailwindCss TRANSFORMER. This is my .env config:

OUTPUT=./output
BUILDINDEX=1
HTMLMODE=comments
TRANSFORMERS=addTailwindCss,prefixSrc,useInter,convertVue,stripAlpine
VUE_OUTPUT=$OUTPUT/vue
STRIPALPINE_OUTPUT=$OUTPUT/no-alpine

And this is a simplified tailwind config from a different project (that I need to integrate tailwind UI into).

// See default config https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
const defaultTheme = require('tailwindcss/defaultTheme')
const colors = defaultTheme.colors

module.exports = {
    prefix: 'tw-',
    theme: {
        //colors: colors,
        extend: {
            colors: Object.assign(colors, {
                'linkColor': colors.blue['600'], 
                'linkHoverColor': colors.blue['800'], 
            }),
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
                base: [
                    'Nunito',
                    'sans-serif'
                ],
            },

        }
    },
    variants: {},
    plugins: [
        require('@tailwindcss/ui')({
            layout: 'sidebar',
        })
    ]
}

Nothing out of the ordinary here, all I want to do is:

1. extend the colors, fonts, etc in the tailwind config, and
2. update the purgecss config, according to https://tailwindui.com/documentation#update-your-purgecss-configuration (I havent figured out why I need this or how yet)

For config options, maybe mirroring something like this would be good? https://github.com/nuxt-community/tailwindcss-module#configuration I have to admit, I am using nuxt.js and am figuring out some of this stuff myself. I hate wrangling with postcss config - not sure why it's so hard. May be completely unrelated to your repo here - so I'm sorry for the rant.

[kiliman]

The crawler now generates the .css file from the config. I then extract all the class names so I can add the prefix to the Tailwind UI components.

If you have a prefix defined in your config, I have to generate the .css file twice. Once with and once without the prefix. I use the non-prefix version to generate the class names to search in the Tailwind UI HTML files. The prefixed/generated CSS will be copied to the OUTPUT folder and referenced by the component files.

I've also added a purgecss step, so it takes the default CSS of 2.6MB/152K lines to a file of only 22KB/1340 lines.

Anyway, need to clean it up and figure out the setup and workflow, but all the pieces are in place.

[connecteev]

@kiliman thats great, thanks for the update. Look forward to seeing this done! Btw I figured out the tailwind+postcss config (this is using nuxt.js)

tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    prefix: 'tw-',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui')({
      // See https://tailwindui.com/documentation#configuring-sidebar-breakpoints
      // Turning this off for now. This may be buggy as it makes the hero sections like the "with wide angled image on right" look funky
      // https://tailwindui.com/components/marketing/sections/heroes
      // layout: 'sidebar',
    })
  ]
}

nuxt.config.js (contains the postcss config)

  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
  ],
  /*
   * See https://github.com/nuxt-community/tailwindcss-module#configuration
   */
  tailwindcss: {
    configPath: '~/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
    purgeCSSInDev: true,
    exposeConfig: false
  },
  /*
   * See https://purgecss.com/guides/nuxt.html#nuxt-js-plugin
   * Modified based on tailwindUI settings: https://tailwindui.com/documentation#update-your-purgecss-configuration
   */
  purgeCSS: {
    mode: "postcss",
    enabled: ({ isDev, isClient }) => (!isDev && isClient), // or `false` when in dev/debug mode
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js'
    ],
    styleExtensions: ['.css'],
    whitelist: ['body', 'html', 'nuxt-progress'],
    extractors: [
      {
        // replace original config with that required by tailwindUI
        // extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
        extractor: content => content.match(/[\w-/.:]+(?<!:)/g) || [],
        extensions: ['html', 'vue', 'js']
      }
    ]
  },

[connecteev]

@kiliman hope things are well. I'm sure you are well aware of this, but just in case you dont know, Adam recently released 1.4 in which the postcss config will be integrated into the tailwind config itself: https://tailwindcss.com/docs/release-notes#tailwind-css-v1-4 Hopefully that makes this task a bit easier