How to integrate with Tailwind?

[mamcx]

I have tried to setup this with tailwind but is not clear for me how exactly. I try importing as tailwind plugin:

module.exports = {
  	theme: {
    	extend: {},
  	},
  	variants: {},
	plugins: [
    	require('@a17t'),
  	]
}

How a postcss:

module.exports = {
  plugins: [
  	require('a17t'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Or with a direct import on my main css

@import "a17t";
@import "tailwindcss/base";
@import "tailwindcss/components";

None work for me. (ps: I'm not very fluent in the JS ecosystem so if this is something obvious is not for me)

[ortuagustin]

You should import a17t in a .js file, ie

src/main.js

import 'a17t'
import './assets/app.css'

assets/app.css

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

postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Then, PostCSS will process the tailwind directives; a17t is already processed. You can check the package.json file in this repo that the main file that gets imported is the css

{
  "name": "a17t",
  "version": "0.1.4",
  "description": "Atomic design toolkit for beautiful, maintainable, and custom interfaces",
  "main": "dist/a17t.css",
...
}

PS: I've tested this with an empty Vue app

[milesmcc]

Thanks for explaining, @ortuagustin. I’ll expand the documentation to better explain how to integrate a17t.