studnitz / gridsome-plugin-tailwindcss

A Tailwind plugin for Gridsome.

gridsome-plugin-tailwindcss

Example project

This plugin will add Tailwind to your Gridsome project. I've gone ahead and automatically imported the default tailwind.css file from the Tailwind npm package. It's just add a CSS file that includes:

@tailwind base;
@tailwind components;
@tailwind utilities;

You may be wondering, "Where do I add global CSS?!" Short answer, you don't. Long answer, read the Tailwind docs on creating plugins and use tailwind.config.js to add base styles and create components/utilities there.

If you need to create tailwind.config.js, run ./node_modules/.bin/tailwind init to create one.

To use this plugin, run npm install -D gridsome-plugin-tailwindcss add the following to your gridsome.config.js.

modules.exports = {
	plugins: [
		{
			use: 'gridsome-plugin-tailwindcss',
			options: {
			tailwindConfig: './some/file/js',
			purgeConfig: {},
			presetEnvConfig: {},
			shouldPurge: true,
			shouldImport: true,
			shouldTimeTravel: true,
		}
	}
  ]
}

If you don't supply a config file path, Tailwind defaults will be used.

The following PostCSS plugins are also included with this plugin:

PurgeCSS

PurgeCSS is enabled by default. If you'd like to disable it, pass shouldPurge: false to the plugin options object.

postcss-import

postcss-import included by default. Pass shouldImport: false to disable.

postcss-preset-env

postcss-preset-env included by default. Pass shouldTimeTravel: false to disable. You may also pass a config object to the plugin as presetEnvConfig.

With this one plugin, you should be ready to use Tailwind right away. Keep your customization to tailwind.config.js whenever possible, but you can use the full power of Tailwind (including @apply) in your Vue components when necessary.

Happy coding!