• How to Process Tailwind / PostCSS with Webpack

    Usually when I work with webpack another tool I'm using generates the appropriate config for me and I can remain blissfully unaware of how it all works.

    With Tanzawa I've only been adding tooling when absolutely necessary. The other day I configured PostCSS and Tailwind with Webpack. It still required a bunch of searching and piecing together blog posts to get something that worked for me.

    Below is a list of facts that helped me figure out how to think about processing CSS with webpack.

    • As wrong as it feels, your entry point for processing your CSS should be a Javascript file.
    • Webpack by default does not output a separate stylesheet file. In order to output a plain CSS file, you must use the MiniCssExtractPlugin.
    • Despite wanting to output only CSS, and specifying the filename in the options (style.css), Webpack will create an empty Javascript file regardless. There isn't a way to prevent this unless you add another plugin. I'm adding it to .gitignore.
    • The "use" plugins have the following roles
      • MiniCssExtractPlugin: Exact built css to a dedicated css file.
      • css-loader: Allow you to import css from your entrypoint Javascript file
      • postcss-loader: Run postcss with yourΒ 

    // webpack.config.js
    const path = require('path');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    const tailwindConfig = {
      entry: "./css/index.js",
      output: {
        path: path.resolve(__dirname, "../static/tailwind/"),
      },
      plugins: [
        new MiniCssExtractPlugin({ 
            filename: "style.css"
        }),
      ],
      module: {
       rules: [
        {
          test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              { loader: "css-loader", options: { importLoaders: 1 } },
              "postcss-loader",
            ],
        },
       ],
      },
    }
    module.exports = [tailwindConfig]

    In order for postcss to play well with Tailwind and webpack, I needed to update my config to pass the tailwind plugin the path for the tailwind.config.js. It simply imports (requires) the tailwind config and immediately passes the path.

    // postcss.config.js
    module.exports = {
      plugins: [
        require("tailwindcss")("./tailwind.config.js"),
        require("autoprefixer"),
      ]
    }

    Finally to run this all for production, I execute via webpack as follows. I still need to figure out how to get the NODE_ENV environment variable set via with the webpack --production flag, so for now it's a bit redundant.

    // package.json
    {
      ...
      "scripts": {
        "build": "NODE_ENV=production webpack --mode=production"
      }
      ...
    }
  • The Week #49

    • This week's been a good week. A tiring week, but a good week, so I'll dive right in.
    • I realized that Tanzawa was never going to be "good enough" or "finished enough" for me to release it. It's the first project I've made public in a very long time. The last big project I worked on was Kwoosh, a project management app I was building with my mate Jacob around 4 or 5 years ago. Making it public is a huge relief, not just because "it's out there", but it will force me to document and follow proper development workflows (no more committing directly on main πŸ™ƒ)
    • The article I wrote for Web+DB Press has been officially announced in the upcoming issue. It's an 8-page introduction on using graphene-django to build GraphQL APIs with Django. It's my second time having my writing published in Japanese, but the first time being credited by name. It was also much easier to write in Japanese this time about, as I've had the past 4 years read/writing Japanese everyday at work.
    • My father-in-law's appointment for his first shot got moved up to the 22nd of this month and my mother-in-law got an appointment for the first week of next month. Super happy they'll be vaccinated soon.Β 
    • Yokohama, feeling pressure from Kawasaki is going to start sending vaccination vouchers out to people under 65 starting mid-June (so...this week?)!Β  I think it might be a bit tight to get fully vaccinated before the Olympics, but maybe I'll be able to get my first shot and a bit of time for my immune system to do its thing before then. I remain optimistic.
    • Thanks for FindADocJp.org, I was able to find a clinic nearby in Totsuka that's doing reservations for people, regardless of age/vaccination voucher to get left-over shots in the case of cancellations. We had started building a sheet on the HN Tokyo Slack for this kind of information, but open forms on 'net let more people participate. Hats off to @TheYokohamaLife for building it.
    • Leo's going through a papa-phase been sticking to me like glue from the moment he wakes until he goes to sleep. I'm happy to spend time with him, as I know this won't last forever, but boy is it tiring.
  • He explained that since most people are not given the power to directly change these policies, the most effective way to bring about change would be to make a statement to those running the economy by becoming self-sufficient through boycotting corporations, growing one's own vegetables, and making one's own clothes.Β 

    The quote above is from his Wikipedia entry, but I knew there was a reason I liked Manu Chao.  ✊
  • Checkin to Costco (γ‚³γ‚Ήγƒˆγ‚³)

    in Zama-shi, Kanagawa, Japan
    密でーす
  • πŸ”Tanzawa is Public πŸŽ‰

    Over the past few months I've been talking about the release of Tanzawa. And over these few months I keep on building up what the first release needs to be in my head. It must:Β 

    • not have any bugs
    • be easy to use
    • have proper documentation for getting started

    and so on and so forth. I keep on finding new things to add or fix that are "must haves" and so I keep on finding reasons to delay the release. And it's slowly been adding a bit of self-induced stress.

    No more.

    Tanzawa is now open source. It lives on GitHub at jamesvandyne/tanzawa. It has bugs. It has a bunch of edges rough enough to cut you. It has zero documentation for how to install and use it.

    But I'll address them overtime. And eventually, someday,Β  it will reach my vision of being a simple and sustainableΒ  home on the web.

    If you need help or have questions or want to lend a hand: reply here, ping me on twitter @jamesvandyne, or open an issue.

    Tanzawa is public
  • Since it’s going to end soon, another ajisai photo from the other morning while walking Sophie.

    Purple 😍
  • Checkin to ベッカラむ γƒˆγƒΌγƒ³ ガルテン

    in Japan
    Got some what looks to be amazing bread.
  • Small quality of life improvements today in Tanzawa: Β admin pages gained mobile navigation and added a link to the admin on the public pages when you’re logged in.
  • Growing up in the US where you from building to car to building, wearing long-sleeves in summer for UV protection didn't seem necessary. Whenever I tried my shirts and jackets weren't made for it so I lasted 3 minutes before changing clothes.

    Really enjoying my Terre Planing Hoody – keeping me protected in the hot/humid Japanese summers with 50 UPFΒ  and doesn't give me heatstroke.
  • Checkin to Starbucks

    in Kanagawa, Japan
    Get that caffeine into my blood.
1 of 60 Next