typed-tailwind-loader v1.0.0

typed-tailwind-loader

A webpack loader for Typed Tailwind. It simply executes all Tw()...$() calls at compile time so there is no run time cost and the output can then be processed normally with other tools (such as PurgeCSS).

Note that you don't need this loader in order to use Typed Tailwind. Those benefits come with a trade-off that you must add it into your build config (e.g. CRA users may need to eject or fork).

Usages

Install typed-tailwind-loader:

$ npm install typed-tailwind-loader --save-dev

Then add the loader to your webpack config. It only required option is a path to your generated TypeScript class:

webpack.config.js (Example)

const path = require("path");

const ttwLoader = {
  loader: "typed-tailwind-loader",
  options: { config: path.resolve("./src/tw.ts") },
};

const tsRules = {
  test: /\.tsx?$/,
  // Ensure that "typed-tailwind-loader" is run first
  use: ["ts-loader", ttwLoader],
  exclude: /node_modules/,
};

module.exports = { module: { rules: [tsRules] } };

source.ts

import { Tw } from './file.txt';
console.log(Tw().textRed().lgBlock().$());

output.ts

console.log("text-red lg:block");

Examples

See a working example at examples/webpack.

License

MIT